快捷導(dǎo)航

原生JavaScript+LESS實(shí)現(xiàn)瀑布流

更新時(shí)間：2014年12月12日 11:55:34 投稿：hebedich

這篇文章主要介紹了原生JavaScript+LESS實(shí)現(xiàn)瀑布流的方法，附上了具體實(shí)例，這里推薦給有需要的小伙伴。

HTML(注意包裹關(guān)系,方便js調(diào)用)

 <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預(yù)編譯)

復(fù)制代碼代碼如下:

 * {

     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(自己理解的注解)

(函數(shù)存在一定瑕疵,僅用于學(xué)習(xí)理解)

復(fù)制代碼代碼如下:

 window.onload = function () {

     waterfall("main","box");

     //調(diào)用自定義函數(shù);作用于main下的每一個(gè)box元素;

     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}

     //模擬json數(shù)據(jù);

     window.onscroll = function () {

         if (checkScrollSlide) {

         //調(diào)用自定義函數(shù);根據(jù)函數(shù)返回值確定滾動(dòng)是否超出范圍;

             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);

                 //創(chuàng)建box塊

                 var oPic = document.createElement("div");

                 oPic.className = "pic"; 

                 oBox.appendChild(oPic);

                 //創(chuàng)建pic塊

                 var oImg = document.createElement("img");

                 //創(chuàng)建img元素

                 oImg.src = "images/"+dataInt.data[i].src;

                 //設(shè)置圖片引用;

                 oPic.appendChild(oImg);

             };

             waterfall("main","box");

             //將動(dòng)態(tài)生成的數(shù)據(jù)塊進(jìn)行流式布局;

         };

     };

 };

 //流式布局主函數(shù),自動(dòng)調(diào)整數(shù)據(jù)塊的位置;

 function waterfall (parent,box) {

     //將main下的所有box元素取出;"parent"代表父級(jí),box代表box元素;

     var oParent = document.getElementById(parent);

     //將父級(jí)元素賦值給變量oParent;

     var oBoxs = getByClass(oParent,box);

     //通過(guò)自定義函數(shù),獲取父級(jí)下的每一個(gè)box元素;得到的是所有box元素的集合;

     //再次將這個(gè)得到的box元素的集合賦值給oBoxs;(因?yàn)樽饔糜騿?wèn)題,變量不共用);

     // console.log(oBoxs.length);

     //在控制臺(tái)中打印出box元素的數(shù)量,用于調(diào)試;

     var oBoxW = oBoxs[0].offsetWidth;

     //計(jì)算出每一列的寬度;offsetWidth包含內(nèi)邊距在內(nèi)的寬度;

     // console.log(oBoxW);測(cè)試;

     var cols = Math.floor(document.documentElement.clientWidth/oBoxW);

     //計(jì)算整個(gè)頁(yè)面顯示的列數(shù)(頁(yè)面寬/box的寬);

     oParent.style.cssText = "width:"+oBoxW*cols+"px;margin:0 auto";

     //父元素main的寬度=每一列的寬*列數(shù);并且左右居中;

     var hArr = [];

     //存放每一列高度的數(shù)組;

     for (var i = 0; i < oBoxs.length; i++) {

     //遍歷oBoxs數(shù)組;

         if (i<cols) {

         //這里符合條件的是第一行的每列的第一個(gè);

             hArr.push(oBoxs[i].offsetHeight);

             //得出每一列的高度放入數(shù)組中;

         }else{

         //這里的box元素已經(jīng)不是第一行的元素了;

             var minH = Math.min.apply(null,hArr);

             //得出第一行的最小高度并賦值給變量;

             // console.log(minH);

             var index = getMinhIndex(hArr,minH);

             //調(diào)用自定義函數(shù)獲取這個(gè)變量的index值;

             oBoxs[i].style.position = "absolute";

             oBoxs[i].style.top = minH+"px";

             oBoxs[i].style.left = oBoxW*index+"px";

             //設(shè)置當(dāng)前元素的位置;

             //當(dāng)前元素的left值=頂上的元素的index值*每列的寬度;

             //oBoxs[i].style.left = oBoxs[index].offsetLeft+"px";

             //第二種獲取當(dāng)前元素的left值;

             //此時(shí)在第index列添加了一個(gè)box元素;

             hArr[index]+=oBoxs[i].offsetHeight;

             //每一列更新后的高度=每一列原來(lái)的高度+后來(lái)添加的box元素的高度;

         };

     };

 };

 //js原生通過(guò)Class獲取元素;

 function getByClass (parent,claName) {

     //通過(guò)class獲取元素;(在父級(jí)parent的容器下獲取claName的元素;)

     var boxArr = new Array();

     //聲明數(shù)組,用來(lái)存儲(chǔ)獲取到的所有class為box的元素;

     var oElements = parent.getElementsByTagName("*")

     //聲明變量用來(lái)存儲(chǔ)此父元素下的所有子元素(*);

     for (var i = 0; i < oElements.length; i++) {

     //遍歷數(shù)組oElements;

         if (oElements[i].className==claName) {

         //如果數(shù)組中的某一個(gè)元素的calss類與參數(shù)claName相同;

             boxArr.push(oElements[i]);

             //則把遍歷到的這個(gè)box元素歸類到boxArr數(shù)組;

         };

     };

     return boxArr;

     //調(diào)用數(shù)組后,經(jīng)過(guò)一系列函數(shù),遍歷;將得到的數(shù)組返回給調(diào)用的函數(shù);

 };

 //獲取數(shù)組元素的index值;

 function getMinhIndex (arr,val) {

 //arr是父級(jí)數(shù)組;val是當(dāng)前元素;

     for(var i in arr){

     //從0開始遍歷;

         if(arr[i]==val){

         //找到當(dāng)前元素在數(shù)組中對(duì)應(yīng)的index值;

             return i;

             //函數(shù)返回值即是當(dāng)前元素的index值;

         };

     };

 };

 //檢測(cè)是否具備了滾動(dòng)加載數(shù)據(jù)塊的條件;

 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);

     //最后一個(gè)box元素距離頁(yè)面頂部的高度(找到最后一個(gè)box(oBoxs.lenght-1)的offsetTop)+自身的一半;

     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

     //瀏覽器滾動(dòng)條滾動(dòng)的距離;

     // console.log(scrollTop);

     var height = document.body.clientHeight || document.documentElement.clientHeight;

     //瀏覽器視口的高度;

     // console.log(height);

     return (lastBoxH<scrollTop+height)?true:false;

     //頁(yè)面滾動(dòng)的距離是否大于最后一個(gè)box元素的offsetTop;

 };

總結(jié)：

用瀑布流來(lái)展現(xiàn)照片再好不過(guò)了，下面是瀑布流（每一行的長(zhǎng)度等于瀏覽器窗口的長(zhǎng)度）的一種實(shí)現(xiàn)方式，也可以用css3實(shí)現(xiàn)，很簡(jiǎn)單，谷歌一下你就知道。
我的思路大概是一張一張的圖片插入，當(dāng)這一行的圖片保持長(zhǎng)寬比例不變并且高度低于250時(shí)就完成一個(gè)了循環(huán)，即這一行插入進(jìn)去了，。
然后進(jìn)入下一個(gè)循環(huán)插入下一行。

您可能感興趣的文章: