首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >工作实战案例,瀑布流布局实现(方法:CSS3,原生JS,jQuery)。

工作实战案例,瀑布流布局实现(方法:CSS3,原生JS,jQuery)。

作者头像
用户5997198
发布2019-11-13 11:55:15
1.4K0
发布2019-11-13 11:55:15
举报
文章被收录于专栏:蚂蚁开源社区蚂蚁开源社区
案例:瀑布流布局实现。

涉及技术点:

  • 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>
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-11-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 蚂蚁大喇叭 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档