你的位置:首页 > Java教程

[Java教程]扒一扒瀑布流布局的几种实现


自Pinterest首次使用瀑布流式布局,现在这种页面布局已经得到了非常广泛的应用,比如蘑菇街、美丽说等各类购物网站,图丽网等美女图片展示网站等。
现在我们扒一扒瀑布流的几种实现方式(今天在公司加班到10点才回,眼睛好累,代码先不写注解了,有时间再补上,感兴趣的同学可以自己敲着看看效果):
一、css3
    实现原理:使用css3的多列属性(column),优点是实现起来比较简单,缺点是兼容性不太好。
    上代码:
  
<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>waterFall01-css多列</title>  <style>    html,body{      margin:0;      padding: 0;    }    #container{      column-width:250px;/*列宽*/      -webkit-column-width:250px;      -moz-column-width:250px;      column-gap:5px;/*列间距*/      -webkit-column-gap:5px;      -moz-column-gap:5px;    }    .item{      margin:5px 0;/*因为左右有gap*/      padding:10px;      border: 1px solid #ccc;      box-shadow: 0 0 6px #ccc;      border-radius: 5px;    }    .item img{      width: 100%;    }    .item p{      text-align: center;      font-family: Microsoft Yahei;    }  </style></head><body>  <div id="container">    <div class="item"><img src="images/01/img (1).jpg" alt=""></div>    <div class="item"><img src="images/01/img (2).jpg" alt=""></div>    <div class="item"><img src="images/01/img (3).jpg" alt=""><p>描述信息</p></div>    <div class="item"><img src="images/01/img (4).jpg" alt=""></div>    <div class="item"><img src="images/01/img (5).jpg" alt=""></div>    <div class="item"><img src="images/01/img (6).jpg" alt=""></div>    <div class="item"><img src="images/01/img (7).jpg" alt=""></div>    <div class="item"><img src="images/01/img (8).jpg" alt=""></div>    <div class="item"><img src="images/01/img (9).jpg" alt=""></div>    <div class="item"><img src="images/01/img (10).jpg" alt=""></div>    <div class="item"><img src="images/01/img (11).jpg" alt=""></div>    <div class="item"><img src="images/01/img (12).jpg" alt=""></div>    <div class="item"><img src="images/01/img (13).jpg" alt=""></div>    <div class="item"><img src="images/01/img (14).jpg" alt=""></div>    <div class="item"><img src="images/01/img (15).jpg" alt=""></div>    <div class="item"><img src="images/01/img (16).jpg" alt=""></div>    <div class="item"><img src="images/01/img (17).jpg" alt=""></div>    <div class="item"><img src="images/01/img (18).jpg" alt=""></div>    <div class="item"><img src="images/01/img (19).jpg" alt=""></div>    <div class="item"><img src="images/01/img (20).jpg" alt=""></div>    <div class="item"><img src="images/01/img (21).jpg" alt=""></div>    <div class="item"><img src="images/01/img (22).jpg" alt=""></div>    <div class="item"><img src="images/01/img (23).jpg" alt=""><p>描述信息</p></div>    <div class="item"><img src="images/01/img (21).jpg" alt=""></div>    <div class="item"><img src="images/01/img (22).jpg" alt=""></div>    <div class="item"><img src="images/01/img (23).jpg" alt=""><p>描述信息</p></div>    <div class="item"><img src="images/01/img (1).jpg" alt=""></div>    <div class="item"><img src="images/01/img (2).jpg" alt=""></div>    <div class="item"><img src="images/01/img (3).jpg" alt=""></div>    <div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div>    <div class="item"><img src="images/01/img (4).jpg" alt=""></div>    <div class="item"><img src="images/01/img (5).jpg" alt=""></div>    <div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div>    <div class="item"><img src="images/01/img (20).jpg" alt=""></div>    <div class="item"><img src="images/01/img (11).jpg" alt=""></div>    <div class="item"><img src="images/01/img (19).jpg" alt=""></div>    <div class="item"><img src="images/01/img (13).jpg" alt=""></div>    <div class="item"><img src="images/01/img (15).jpg" alt=""></div>    <div class="item"><img src="images/01/img (14).jpg" alt=""></div>    <div class="item"><img src="images/01/img (16).jpg" alt=""></div>    <div class="item"><img src="images/01/img (21).jpg" alt=""></div>    <div class="item"><img src="images/01/img (17).jpg" alt=""></div>    <div class="item"><img src="images/01/img (18).jpg" alt=""></div>    <div class="item"><img src="images/01/img (12).jpg" alt=""></div>    <div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div>    <div class="item"><img src="images/01/img (10).jpg" alt=""></div>    <div class="item"><img src="images/01/img (6).jpg" alt=""></div>    <div class="item"><img src="images/01/img (7).jpg" alt=""></div>    <div class="item"><img src="images/01/img (8).jpg" alt=""></div>  </div></body></html>

 

 


二、JavaScript
   实现原理:原生js操作dom,动态插入新图片
  上代码:
  
<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>waterFall02</title>  <style>    *{      margin: 0;      padding: 0;    }    #main{      position: relative;;    }    .item{      padding: 15px 0 0 15px;      float: left;    }    .box{      padding: 10px;      border: 1px solid #ccc;      box-shadow: 0 0 6px #ccc;      border-radius: 5px;    }    .box img{      width:162px;    }  </style>  <script>    window.onload = function(){      waterFall("#main",".item");      var fakeData = {'data':[{'src':'img (1).jpg'},{'src':'img (2).jpg'},{'src':'img (3).jpg'},{'src':'img (5).jpg'},{'src':'img (9).jpg'},{'src':'img (4).jpg'},{'src':'img (6).jpg'},{'src':'img (7).jpg'}]};      window.onscroll = function(){        if(checkScroll()){          var oParent = g("#main"), oItem, oBox, oImg;          for(var i = 0;i < fakeData.data.length; i++){            oItem = c("div");            oItem.className = "item";            oParent.appendChild(oItem);            oBox = c("div");            oBox.className = "box";            oItem.appendChild(oBox);            oImg = c("img");            oImg.src = "images/01/" + fakeData.data[i].src;            oBox.appendChild(oImg);          }          waterFall("#main",".item");        }      }    };    function g(selector){      return selector.substr(0,1) === "#" ?         document.getElementById(selector.substr(1)) : document.getElementsByClassName(selector.substr(1));    }    function c(ele){      return document.createElement(ele);    }    function waterFall(parent, item){      var oParent = g(parent);      var items = g(item);      var iWidth = items[0].offsetWidth;      var cols = Math.floor(document.documentElement.clientWidth / iWidth);      oParent.style.cssText = "width:" + iWidth * cols +"px;margin: 0 auto;";      var iHeightArr = [],iHeight, minH, minHIndex;      for(var i = 0;i < items.length; i++){        iHeight = items[i].offsetHeight;        if(i < cols){          iHeightArr[i] = iHeight;        }else{          minH = Math.min.apply(null,iHeightArr);          minHIndex = getMinHeightIndex(iHeightArr, minH);          items[i].style.position = "absolute";          items[i].style.top = minH + "px";          items[i].style.left = items[minHIndex].offsetLeft + "px";          iHeightArr[minHIndex] += items[i].offsetHeight;        }      }    }    var main = g("#main");    /*    *获取元素数组中最小高度元素的index    */    function getMinHeightIndex(arr, minHeight){      for(var i =0;i < arr.length;i++){        if(arr[i] === minHeight)          return i;      }      return -1;    }    function checkScroll(){      var items = g(".item");      var doc = document.documentElement, body = document.body;      var lastItemHeight = items[items.length - 1].offsetTop + Math.floor(items[items.length - 1].offsetHeight /2);//最后一个item距离网页顶部+自身高度的一半,这样未滚到底就开始加载      var scrollTop = doc.scrollTop || body.scrollTop;      var documentHeight = doc.clientHeight;      return lastItemHeight < scrollTop + documentHeight;    }  </script></head><body>  <div id="main">    <div class="item">      <div class="box"><img src="images/01/img (1).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (2).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (3).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (4).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (5).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (6).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (7).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (8).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (9).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (10).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (11).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (12).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (13).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (14).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (15).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (16).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (17).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (18).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (19).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (20).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (21).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (22).jpg" alt=""></div>    </div>    <div class="item">      <div class="box"><img src="images/01/img (23).jpg" alt=""></div>    </div>  </div></body></html>

 


三、jQuery
  实现原理:同上一种,用jQuery,只为简化dom操作代码
  上代码:
  
<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>waterFall03</title>  <style>    *{      padding: 0;      margin: 0;    }    .box{      position: relative;      float: left;    }    .content{      padding: 10px;      border: 1px solid #ccc;      box-shadow: 0 0 5px #ccc;      border-radius: 5px;    }    .content img{      width: 180px;      height: auto;    }  </style>  <script src="jquery-2.1.1.min.js"></script>  <script>  $(function(){    $(window).on("load",function(){      imgLocation();      var dataImg = {"data":[{"src":"img (1).jpg"},{"src":"img (2).jpg"},{"src":"img (3).jpg"},{"src":"img (4).jpg"},{"src":"img (5).jpg"},{"src":"img (6).jpg"},{"src":"img (7).jpg"}]};      window.onscroll = function(){        if(scrollside()){          $.each(dataImg.data,function(index,value){            var box = $("<div>").addClass("box").appendTo($("#container"));            var content = $("<div>").addClass("content").appendTo(box);            $("<img>").attr("src","images/01/"+$(value).attr("src")).appendTo(content);          });          imgLocation();        }      };    });  });  function scrollside(){    var box = $(".box");    var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);    var documentHeight = $(document).width();    var scrollHeight = $(window).scrollTop();    return (lastboxHeight<scrollHeight+documentHeight)?true:false;  }  function imgLocation(){    var box = $(".box");    var boxWidth = box.eq(0).width();    var num = Math.floor($(window).width()/boxWidth);    var boxArr=[];    box.each(function(index,value){      var boxHeight = box.eq(index).height();      if(index<num){        boxArr[index]= boxHeight;      }else{        var minboxHeight = Math.min.apply(null,boxArr);        var minboxIndex = $.inArray(minboxHeight,boxArr);        $(value).css({          "position":"absolute",          "top":minboxHeight,          "left":box.eq(minboxIndex).position().left        });        boxArr[minboxIndex]+=box.eq(index).height();      }    });  }  </script></head><body>  <div id="container">    <div class="box">      <div class="content">        <img src="images/01/img (1).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (2).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (3).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (4).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (5).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (6).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (7).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (8).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (9).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (10).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (11).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (12).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (13).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (14).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (15).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (16).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (17).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (18).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (19).jpg">      </div>    </div>    <div class="box">      <div class="content">        <img src="images/01/img (20).jpg">      </div>    </div>  </div></body></html>

 

附:代码包下载链接