js瀑布流原理：
1、計算一行能放幾張圖片，假如爲num（當前可視區寬度 / 圖片寬度（這裏圖片寬度是規定好的一個固定值，所有圖片寬度一樣））
2、獲取一行中最矮的那張圖片，讓第索引號大於num的圖片放到最矮的圖片後面
3、噹噹前可視區域高度加上滾動條滾動高度大於最後一張圖片距離頂部的高度時再加載其他圖片，其他圖片的加載就是重複上面的步驟
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
* {
margin:0;
padding:0;
}
#container {
position: relative;
}
.box {
padding:5px;
float: left;
}
.img-box {
padding:5px;
border:1px solid #ccc;
box-shadow: 0 0 5px #ccc;
border-radius:5px;
overflow: hidden;
}
.img-box img {
width: 150px;
height:auto;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="img-box">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/left.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/free_03.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/004.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/05.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/005.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/left.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/free_03.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/004.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/05.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/005.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/left.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/free_03.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/004.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/05.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/005.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/left.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/free_03.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/004.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/05.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/005.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/left.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/free_03.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/004.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/05.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-box">
<img src="images/005.jpg" alt="">
</div>
</div>
</div>
<script>
window.onload = function(){
var container = document.getElementById("container");
var Imgs = getChildEle(container,"box");
imgLocation(Imgs);
var imgData = {"data":[{"src":"jd1.png"},{"src":"jd2.png"},{"src":"right.png"},{"src":"rss.png"},
{"src":"search.jpg"},{"src":"mi.png"},{"src":"cloud.gif"}]} // 模擬後臺的數據
window.onscroll = function(){
var flag = loadFlag();
if(flag){
for(var i = 0; i < imgData.data.length; i++){
var Box = document.createElement("div");
Box.className = "box";
container.appendChild(Box);
var imgBox = document.createElement("div");
imgBox.className = "img-box";
Box.appendChild(imgBox);
var img = document.createElement("img");
img.src = "images/"+ imgData.data[i].src;
imgBox.appendChild(img);
}
var NewImgs = getChildEle(container,"box");
console.log(NewImgs.length)
imgLocation(NewImgs);
}
}
// 獲取所有圖片盒子
function imgLocation(imgs){
var imgWidth = imgs[0].offsetWidth;
var colsNum = Math.floor(client().width / imgWidth) // 一行能放的圖片張數
container.style.cssText = "width:" + imgWidth * colsNum+ "px;margin: 0 auto"; // 設置最大容器的寬度
var len = imgs.length;
var imgsBoxHeight = [];
for(var i = 0; i < len; i++){
if(i < colsNum){
// 只獲取一行中所有圖片盒子的高度
imgsBoxHeight[i] = imgs[i].offsetHeight;
}else{
var minHeight = Math.min.apply(null,imgsBoxHeight); // 獲取一行盒子中最小高度
var minIndex = getminBoxIndex(imgsBoxHeight,minHeight) // 獲取一行盒子中最小高度盒子的索引
imgs[i].style.position = "absolute";
imgs[i].style.top = minHeight + "px";
imgs[i].style.left = imgs[minIndex].offsetLeft + "px";
imgsBoxHeight[minIndex] = imgsBoxHeight[minIndex] + imgs[i].offsetHeight; // 重新給最小盒子賦值高度，此時最小盒子的高爲他自身高加上拼接在它後面的盒子高度和
}
}
}
function getChildEle(parent,content) { // 獲取所有的圖片盒子
var imgsBox = [];
var allImgs = parent.getElementsByTagName("*");
for(var i = 0; i < allImgs.length; i++){
if(allImgs[i].className == content){
imgsBox.push(allImgs[i]);
}
}
return imgsBox;
}
function client() { // 獲取可視區的寬高兼容方法
if(window.innerWidth != null){
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode === "CSS1compat"){
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
else{
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
}
function getminBoxIndex(imgsBoxHeight,minHight){
for(var i in imgsBoxHeight){
if(imgsBoxHeight[i] == minHight) {
return i
}
}
}
function loadFlag(){ // 控制下拉是否加載圖片
var imgs = getChildEle(container,"box");
var lastImgHeight = imgs[imgs.length-1].offsetTop;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var pageHeight = client().height;
if(lastImgHeight < scrollTop + pageHeight){
var flag = true;
}
return flag;
}
}
</script>
</body>
</html>