原生JavaScript+LESS实现瀑布流

2019-11-20 13:45:37

字体：大中小

来源：转载

供稿：网友

HTML(注意包裹关系,方便js调用)

 <body>
     <div id="main">
         <div class="box">
             <div class="pic">
                 <img src="images/0.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/1.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/6.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/7.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/6.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/7.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
     </div>
 </body>

LESS(less预编译)

复制代码代码如下:

 * {
     margin: 0;
     padding: 0;
 }
 #main {
     position: relative;
 
 }
 .box {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0px 0px 5px #ccc;
     img {
         width:165px;
         height:auto;
     }
 }

JavaScript(自己理解的注解)

(函数存在一定瑕疵,仅用于学习理解)

复制代码代码如下:

 window.onload = function () {
     waterfall("main","box");
     //调用自定义函数;作用于main下的每一个box元素;
     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
     //模拟json数据;
     window.onscroll = function () {
         if (checkScrollSlide) {
         //调用自定义函数;根据函数返回值确定滚动是否超出范围;
             var oParent = document.getElementById("main");
             for (var i = 0; i < dataInt.data.length; i++) {
                 var oBox = document.createElement("div");
                 oBox.className = "box";
                 oParent.appendChild(oBox);
                 //创建box块
                 var oPic = document.createElement("div");
                 oPic.className = "pic"; 
                 oBox.appendChild(oPic);
                 //创建pic块
                 var oImg = document.createElement("img");
                 //创建img元素
                 oImg.src = "images/"+dataInt.data[i].src;
                 //设置图片引用;
                 oPic.appendChild(oImg);
             };
             waterfall("main","box");
             //将动态生成的数据块进行流式布局;
         };
     };
 };
 //流式布局主函数,自动调整数据块的位置;
 function waterfall (parent,box) {
     //将main下的所有box元素取出;"parent"代表父级,box代表box元素;
     var oParent = document.getElementById(parent);
     //将父级元素赋值给变量oParent;
     var oBoxs = getByClass(oParent,box);
     //通过自定义函数,获取父级下的每一个box元素;得到的是所有box元素的集合;
     //再次将这个得到的box元素的集合赋值给oBoxs;(因为作用域问题,变量不共用);
     // console.log(oBoxs.length);
     //在控制台中打印出box元素的数量,用于调试;
     var oBoxW = oBoxs[0].offsetWidth;
     //计算出每一列的宽度;offsetWidth包含内边距在内的宽度;
     // console.log(oBoxW);测试;
     var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
     //计算整个页面显示的列数(页面宽/box的宽);
     oParent.style.cssText = "width:"+oBoxW*cols+"px;margin:0 auto";
     //父元素main的宽度=每一列的宽*列数;并且左右居中;
     var hArr = [];
     //存放每一列高度的数组;
     for (var i = 0; i < oBoxs.length; i++) {
     //遍历oBoxs数组;
         if (i<cols) {
         //这里符合条件的是第一行的每列的第一个;
             hArr.push(oBoxs[i].offsetHeight);
             //得出每一列的高度放入数组中;
         }else{
         //这里的box元素已经不是第一行的元素了;
             var minH = Math.min.apply(null,hArr);
             //得出第一行的最小高度并赋值给变量;
             // console.log(minH);
             var index = getMinhIndex(hArr,minH);
             //调用自定义函数获取这个变量的index值;
             oBoxs[i].style.position = "absolute";
             oBoxs[i].style.top = minH+"px";
             oBoxs[i].style.left = oBoxW*index+"px";
             //设置当前元素的位置;
             //当前元素的left值=顶上的元素的index值*每列的宽度;
             //oBoxs[i].style.left = oBoxs[index].offsetLeft+"px";
             //第二种获取当前元素的left值;
             //此时在第index列添加了一个box元素;
             hArr[index]+=oBoxs[i].offsetHeight;
             //每一列更新后的高度=每一列原来的高度+后来添加的box元素的高度;
         };
     };
 };
 //js原生通过Class获取元素;
 function getByClass (parent,claName) {
     //通过class获取元素;(在父级parent的容器下获取claName的元素;)
     var boxArr = new Array();
     //声明数组,用来存储获取到的所有class为box的元素;
     var oElements = parent.getElementsByTagName("*")
     //声明变量用来存储此父元素下的所有子元素(*);
     for (var i = 0; i < oElements.length; i++) {
     //遍历数组oElements;
         if (oElements[i].className==claName) {
         //如果数组中的某一个元素的calss类与参数claName相同;
             boxArr.push(oElements[i]);
             //则把遍历到的这个box元素归类到boxArr数组;
         };
     };
     return boxArr;
     //调用数组后,经过一系列函数,遍历;将得到的数组返回给调用的函数;
 };
 //获取数组元素的index值;
 function getMinhIndex (arr,val) {
 //arr是父级数组;val是当前元素;
     for(var i in arr){
     //从0开始遍历;
         if(arr[i]==val){
         //找到当前元素在数组中对应的index值;
             return i;
             //函数返回值即是当前元素的index值;
         };
     };
 };
 //检测是否具备了滚动加载数据块的条件;
 function checkScrollSlide () {
     var oParent = document.getElementById("main");
     var oBoxs = getByClass(oParent,"box");
     var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
     //最后一个box元素距离页面顶部的高度(找到最后一个box(oBoxs.lenght-1)的offsetTop)+自身的一半;
     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
     //浏览器滚动条滚动的距离;
     // console.log(scrollTop);
     var height = document.body.clientHeight || document.documentElement.clientHeight;
     //浏览器视口的高度;
     // console.log(height);
     return (lastBoxH<scrollTop+height)?true:false;
     //页面滚动的距离是否大于最后一个box元素的offsetTop;
 };

总结：

用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用css3实现，很简单，谷歌一下你就知道。
我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了，。
然后进入下一个循环插入下一行。

上一篇：js 左右悬浮对联广告代码示例

下一篇：jquery禁止回车触发表单提交