工作实战案例，瀑布流布局实现（方法：CSS3，原生JS，jQuery）。

• 2019 年 11 月 13 日
• 筆記

涉及技术点：

• HTML + CSS简单布局
• jQuery基础运用，瀑布流布局实现3种方法：原生JS，jQuery，CSS3

CSS3版本：

瀑布流布局（CSS版本）

代码：

/*css代码*/  *{margin:0;padding: 0}    #main{      -webkit-column-width:229px;      -moz-column-width:229px;      -o-column-width:229px;      -ms-column-width:229px;    }    .box{padding: 10px 0 0 15px;      display: inline-block;      }    .pic{      padding: 10px;      border:1px solid #ccc;      border-radius: 5px;      box-shadow: 0 0 3px #ccc;      width:192px;      }    .pic img{width:192px;      height: auto}

<!--HTML代码 -->  <div id="main">      <div class="box">        <div class="pic">          <img src="image/P_00.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_01.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_02.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_03.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_04.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_05.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_06.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_07.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_08.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_09.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_010.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_011.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_012.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_013.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_014.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_015.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_016.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_017.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_018.jpg" />        </div>      </div>    </div>

原生JS：

瀑布流布局（js版本）

代码：

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

<!--html+js -->  <div id="main">      <div class="box">        <div class="pic">          <img src="image/P_00.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_01.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_02.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_03.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_04.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_05.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_06.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_07.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_08.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_09.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_010.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_011.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_012.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_013.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_014.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_015.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_016.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_017.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_018.jpg" />        </div>      </div>    </div>    <script type="text/javascript">      window.onload=function(){        waterfall("main","box");        var dataInt={"data":[{"src":"P_01.jpg"},{"src":"P_02.jpg"},{"src":"P_03.jpg"},{"src":"P_04.jpg"},{"src":"P_05.jpg"},{"src":"P_06.jpg"}]}        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);              var oPic=document.createElement("div");              oPic.className="pic";              oBox.appendChild(oPic);              var oImg=document.createElement("img");              oImg.src="image/"+dataInt.data[i].src;              oPic.appendChild(oImg);            }            waterfall("main","box");          }        }      }      function waterfall(parent,box){        var oParent=document.getElementById(parent);        var oBoxs=getByClass(oParent,box);        var oBoxW=oBoxs[0].offsetWidth;        var cols=Math.floor(document.documentElement.clientWidth/oBoxW);        oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto";        var hArr=[];        /*        当拉宽/窄浏览器后，再滚动图片会出现图片重叠的bug.        原因：当拉宽/窄浏览器后，某些已经使用了position定位的图片节点不能恢复到第一排，因为第一排不能有绝对定位的样式，所以在判断不是第一排加绝对定位之前要把前面所有设置过的样式全部清零。        增加如下代码：        for (var i = 0; i < oBoxs.length; i++){          oBoxs[i].style="";        }        如果全部清零可能会拖慢性能，最好设置一个较大的数，如15或者更大一点的就可以了，不用全部清零，如下代码：        for (var i = 0; i < 15; i++){          oBoxs[i].style="";        }        */        for (var i = 0; i < 15; i++){          oBoxs[i].style="";        }        for (var i = 0; i < oBoxs.length; i++) {          if (i<cols) {            hArr.push(oBoxs[i].offsetHeight);          }else{            var minH=Math.min.apply(null,hArr);            var index=getMinhIndex(hArr,minH);            oBoxs[i].style.position="absolute";            oBoxs[i].style.top=minH+"px";            oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";            hArr[index]+=oBoxs[i].offsetHeight;          }        }        }      function getMinhIndex(arr,val){        for(var i in arr){          if (arr[i]==val) {            return i;          }        }      }      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);        var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;        var height=document.body.clientHeight || document.documentElement.clientHeight;        return (lastBoxH<scrollTop+height)?true:false;      }      function getByClass(parent,clsName){        var boxArr=[],          oElements=parent.getElementsByTagName("*");        for (var i = 0; i < oElements.length; i++) {          if (oElements[i].className==clsName) {            boxArr.push(oElements[i]);          }        }        return boxArr;      }  </script>

jQuery：

瀑布流布局（jQuery版本）

代码：

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

<!--html+jQuery -->  <div id="main">      <div class="box">        <div class="pic">          <img src="image/P_00.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_01.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_02.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_03.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_04.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_05.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_06.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_07.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_08.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_09.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_010.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_011.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_012.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_013.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_014.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_015.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_016.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_017.jpg" />        </div>      </div>      <div class="box">        <div class="pic">          <img src="image/P_018.jpg" />        </div>      </div>    </div>    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>    <script type="text/javascript">      $(function(){        waterfall();        var dataInt={"data":[{"src":"P_01.jpg"},{"src":"P_02.jpg"},{"src":"P_03.jpg"},{"src":"P_04.jpg"},{"src":"P_05.jpg"},{"src":"P_06.jpg"}]}        $(window).on("scroll",function(){          if(checkScrollSlide()){            $.each(dataInt.data,function(key,value){              var oBox=$("<div>").addClass("box").appendTo($("#main"));              var oPic=$("<div>").addClass("pic").appendTo($(oBox));              $("<img>").attr("src","image/"+$(value).attr("src")).appendTo($(oPic));              })            waterfall();          }        })      })      function waterfall(){        var $boxs=$("#main>div");        var w=$boxs.eq(0).outerWidth();        var cols=Math.floor($(window).width()/w);        $("#main").width(w*cols).css("margin","0 auto");        var hArr=[];        $boxs.each(function(index,value){          if (index<cols) {            hArr.push($boxs.eq(index).outerHeight());          }else{            var minH=Math.min.apply(null,hArr);            var minIndex=$.inArray(minH,hArr);            $(value).css({              "position":"absolute",              "top":minH+"px",              "left":minIndex*w+"px"            })            hArr[minIndex]+=$boxs.eq(index).outerHeight();          }        })      }      function checkScrollSlide(){        var $lastBox=$("#main>div").last();        var lastDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);        var scrollTop=$(window).scrollTop();        var documentH=$(window).height();        return (lastDis<scrollTop+documentH)?true:false;      }  </script>