html
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><link href="css/style.css" rel="stylesheet"><title>瀑布流</title></head><body><div id="container"><div class="box"><div class="box_img"><img src="images/1.jpg"></div></div><div class="box"><div class="box_img"><img src="images/2.jpg"></div></div><div class="box"><div class="box_img"><img src="images/3.jpg"></div></div><div class="box"><div class="box_img"><img src="images/4.jpg"></div></div><div class="box"><div class="box_img"><img src="images/5.jpg"></div></div><div class="box"><div class="box_img"><img src="images/6.jpg"></div></div><div class="box"><div class="box_img"><img src="images/7.jpg"></div></div><div class="box"><div class="box_img"><img src="images/8.jpg"></div></div><div class="box"><div class="box_img"><img src="images/9.jpg"></div></div><div class="box"><div class="box_img"><img src="images/10.jpg"></div></div><div class="box"><div class="box_img"><img src="images/11.jpg"></div></div></div><script src="js/jswrapller.js"></script></body></html>
jswrapller.js
/*** Created by davidtall on 14/12/16.*/window.onload = function () {imgLocation("container", "box");var imgData={"data":[{"src":"11.jpg"},{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},{"src":"15.jpg"},{"src":"16.jpg"},{"src":"17.jpg"},{"src":"18.jpg"},{"src":"19.jpg"}]};var container = document.getElementById("container");window.onscroll = function () {if (checkFlag()) {for(var i=0;i<imgData.data.length;i++){console.log(i);var box =document.createElement("div");box.className="box";container.appendChild(box);var box_img =document.createElement("div");box_img.className="box_img";box.appendChild(box_img);var img= document.createElement("img");img.src="images/"+imgData.data[i].src;box_img.appendChild(img);}}imgLocation("container","box");}}function checkFlag() {var container = document.getElementById("container");var boxs = document.getElementsByClassName("box");var lastContentHeight = boxs[boxs.length - 1].offsetTop;var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;// console.log(lastContentHeight + ":" + scrollTop + ":" + pageHeight);return scrollTop + pageHeight > lastContentHeight;}function imgLocation(parent, content) {var container = document.getElementById("container");var boxs = document.getElementsByClassName("box");var imgWidth = boxs[0].offsetWidth;//console.log(imgWidth);var num = Math.floor(document.documentElement.clientWidth / imgWidth);var container = document.getElementById(parent);container.style.cssText = "width:" + imgWidth * num + "px; margin: 0 auto;";var boxsHeightArr=[];for(var i=0;i<boxs.length;i++){if(i<num){boxsHeightArr[i]=boxs[i].offsetHeight;}else{//第二行开始使用绝对布局对图片进行定位var minHeight=Math.min.apply(null,boxsHeightArr);var minIndex=getminHeightIndex(boxsHeightArr,minHeight);boxs[i].style.position="absolute";boxs[i].style.top=minHeight+"px";boxs[i].style.left=boxs[minIndex].offsetLeft+"px";boxsHeightArr[minIndex]= boxsHeightArr[minIndex]+boxs[i].offsetHeight;}}}//取得最低高度的img的索引值function getminHeightIndex(boxsHeightArr,minHeight){for( var i in boxsHeightArr){if(boxsHeightArr[i]== minHeight)return i;}}
原文：http://www.cnblogs.com/davidtall/p/4190297.html