原生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禁止回車觸發表單提交