自定义多列瀑布流功能
Posted auto123-num
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义多列瀑布流功能相关的知识，希望对你有一定的参考价值。
html代码
<!DOCTYPE html> <html> <head> <title></title> <meta /> </head> <body> <div class="flow" id="flow_container"></div> </body> </html>
css代码
<style type="text/css"> .flowoverflow:hidden; .flow .columnwidth: 200px;float:left;margin-right: 10px; .flow .itemwidth: 200px;height: autp;overflow:hidden;border-radius: 8px;margin-bottom: 10px;float:left; .flow .item imgwidth: 100%;height: 100%;display:block; </style>
<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); </script>
自定义插件，未完待续。。。。。。
以上是关于自定义多列瀑布流功能的主要内容，如果未能解决你的问题，请参考以下文章
自定义控件三部曲视图篇——瀑布流容器WaterFallLayout实现