html代码
<!DOCTYPE html> <html> <head> <title></title> <meta /> </head> <body> <div class="flow" id="flow_container"></div> </body> </html>
css代码
<style type="text/css"> .flow{overflow:hidden;} .flow .column{width: 200px;float:left;margin-right: 10px;} .flow .item{width: 200px;height: autp;overflow:hidden;border-radius: 8px;margin-bottom: 10px;float:left;} .flow .item img{width: 100%;height: 100%;display:block;} </style>
javascript代码
<script type="text/javascript"> var picGroup = [ 'http://hbimg.b0.upaiyun.com/eb097302d1d086785822c354a3b47ff24701a6b67a22-4tnaLv_fw658', 'http://tc.sinaimg.cn/maxwidth.2048/tc.service.weibo.com/mmbiz_qpic_cn/add9770a239293bdc638cb7aa73b8e9f.jpg', 'http://pic.9ht.com/up/2018-1/15154658375116956.jpg', 'http://www.icauto.com.cn/upload/allimg/161009/05114T4P-0.jpg', 'http://img3.yxlady.com/yl/UploadFiles_5361/20150720/20150720190410239.jpg', 'http://b.hiphotos.baidu.com/image/pic/item/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg', 'http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg', 'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg', 'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg', 'http://a.hiphotos.baidu.com/image/pic/item/f603918fa0ec08fa3139e00153ee3d6d55fbda5f.jpg', 'http://e.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9eac1754f45df39b6003bf3b396.jpg', ]; // 初始化 initFlow({ el: 'flow_container', images: picGroup, column: 5, success: function(res){ console.log('成功的回调函数', res); } }); /** * el: 容器id * images: 图片数组 * column: 显示的列数 大于1 * success: 成功后的回调函数 * */ function initFlow(options){ var images = options.images; let html = ''; if(options.column> 2){ mutilColumn(images); }else{ formatter(images); } // 调用成功的回调函数 // aa(); // function aa(){ // let str = 'test'; // options.success(str); // } // 2列 function formatter(images){ let left = document.createElement('div'); left.className = 'column'; left.id = 'left'; let right = document.createElement('div'); right.className = 'column'; right.id = 'right'; document.getElementById(options.el).appendChild(left); document.getElementById(options.el).appendChild(right); // 图片 for(let i=0;i< images.length;i++){ // 计算两列的高度 let leftHeight = document.getElementById('left').clientHeight; let rightHeight = document.getElementById('right').clientHeight; // 创建元素 let item = document.createElement("div");; item.className = 'item'; let img = document.createElement('img'); img.src = images[i]; item.appendChild(img); if(leftHeight> rightHeight){ right.appendChild(item); } else if(rightHeight >= leftHeight){ left.appendChild(item); } } } // 多列 function mutilColumn(images){ // 创建了列层 let idGroup = createMutilColumn(); // 追加图片 createImage(idGroup); } // 创建多列 function createMutilColumn(){ let array = []; for(let i=0;i<options.column;i++){ let temp = document.createElement('div'); temp.className = 'column'; temp.id = 'column'+i; document.getElementById(options.el).appendChild(temp); array.push({id: temp.id}) } return array; } // 获得每列的当前高度 function getMutilColumnHeight(divGroup){ let newDivGroup = []; for(let i=0;i<divGroup.length;i++){ let tempHeight = document.getElementById(divGroup[i].id).clientHeight; newDivGroup.push({'id': divGroup[i].id, height:tempHeight}); } newDivGroup.sort(function(a,b){ return a.height - b.height; }); return newDivGroup; } // 创建图片元素 function createImage(idGroup){ // 图片 for(let i=0;i< images.length;i++){ // 创建元素 let item = document.createElement("div");; item.className = 'item'; let img = document.createElement('img'); img.src = images[i]; item.appendChild(img); // 计算多列的高 let group = getMutilColumnHeight(idGroup); document.getElementById(group[0].id).appendChild(item); } }
// 滚动条
function scrollFunction(event){
let e = event || window.event;
if (e.wheelDelta) { //第一步：先判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
console.log("滑轮向上滚动");
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
console.log("滑轮向下滚动");
mutilColumn(images);// 追加数据
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
console.log("滑轮向上滚动");
}
if (e.detail< 0) { //当滑轮向下滚动时
console.log("滑轮向下滚动");
mutilColumn(images); // 追加数据
}
}
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {//firefox
document.addEventListener('DOMMouseScroll', scrollFunction, false);
}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFunction;
} </script>
自定义插件，未完待续。。。。。。