扒一扒瀑布流布局的几种实现
自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>
附：代码包下载链接