原生JavaScript LESS實作瀑布流_javascript技巧

HTML(注意包裹關係,方便js呼叫)

複製程式碼 程式碼如下:

 
    

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

    

 身體>

LESS（少預編譯）

複製程式碼程式碼如下：

 * {
     邊距：0；
     填充：0；
 }
 #main {
     位置：相對；
 
 }
 .box {
     內邊距：15px 0 0 15px;
     浮動：左；
 }
 .pic {
     內邊距：10px；
     邊框：1px 實心 #ccc;
     邊框半徑：5px；
     盒子陰影：0px 0px 5px #ccc;
     圖片{
         寬度：165px；
         高度：自動；
     }
 }

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                  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陣列;
         if (i          //這裡符合條件的是第一行的每列的第一個;
             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;
         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      //頁面滾動的距離是否大於最後一個box元素的offsetTop;
 };

總結：

用瀑布流來展現照片再好不過了，下面是瀑布流（每一行的長度等於瀏覽器窗口的長度）的一種實現方式，也可以用css3實現，很簡單，谷歌一下你就知道。
我的思路大概是一張一張的圖片插入，當這一行的圖片保持長寬比例不變並且高度低於250時就完成一個了循環，即這一行插入進去了，。
然後進入下一個迴圈插入下一行。