jquery部分：
//引入JQ庫（版本不同會有差別）
<script src="https://cdn.bootcss.com.jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('load',function(){
var dataImg = {'data':[
{'src':'1.jpg'},
{'src':'2.jpg'},
{'src':'3.jpg'},
{'src':'4.jpg'},
{'src':'5.jpg'},
{'src':'6.jpg'},
//省略N個
]}
//當滾動鼠標時
window.onscroll = function(){
//判斷是否可以滾動加載
if(scrollLoad()){ //滿足滾動加載
$.each(dataImg.data,function(index,value){ 遍歷dataImg的data數據,和動態創建盒子對象的函數,
var box = $('<div>').addClass('box').appendTo('#container');
var content = $('<div>').addClass('content').appendTo(box);
//console.log('src','./images/' + $(value).attr('src')); //打印每張圖片的鏈接地址
$('<img>').attr('src','./images/' + $(value).attr('src')).appendTo(content);
})
imgLoad(); //動態加載后讓圖片重新按瀑布流排列
}
}
imgLoad(); //調用函數
})
//創建一個鼠標滾動加載盒子的函數，加載原理：鼠標滾動到最后一張圖的高度的一半時就加載更多的圖片
function scrollLoad(){
var box = $('.box');
//獲取最后一張圖的高度 = 最后一第圖的offsetTop值 + 最后圖片的高度的一半
var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height/2);
var documentHeight = $(document).width(); //獲取當前文檔的高度
var scrollHeight = $(window).scrollTop(); //獲取鼠標滾動的高度
//當最后一張圖的高度 < 當前文檔的高度 + 鼠標滾動的高度 則可以繼續滾動鼠標加載 否則不加載
return (lastboxHeight < documentHeight + scrollHeight)?true:false;
}
//創建一個瀑布流布局的函數
function imgLoad(){
var box = $('.box'); //定義變量方便獲取
var boxWidth = box.eq(0).width(); //計算box的寬度(因為每個都一樣，所以獲取第一個)
var num = Math.floor($(window).width()/boxWidth); //計算每一排的盒子個數(用窗口寬除以一個盒子的寬 = 盒子的個數)
var boxArr = [] //定義一個數組存放每排的盒子的高度
box.each(function(index,value){ //遍歷盒子的元素 以index為盒子的位置--value為盒子對象為參數傳進來
var boxHeight = box.eq(index).height(); //計算出每個盒子的高度
if(index < num){ //index < num (num是每一排的盒子個數,index < num 就是指一排的盒子 在這里就是指第一排的盒子)
boxArr[index] = boxHeight; //數組存放的是每個盒子的高度 => 數組元素的索引就是每個盒子的高度
}else{ //
var minboxHeight = Math.min.apply(null,boxArr); //獲取高度最小的盒子
var minboxIndex = $.inArray(minboxHeight,boxArr); //計算高度最小的盒子的位置
$(value).css({ //重新設置每個盒子對象的css，都是以每列最小高度排列
'position':'absolute', //給第一排后每個盒子重新定位
'top':minboxHeihgt + 10, //top值為最小高度盒子的top值再+10px（+10px讓盒子的空隙）
'left':box.eq(minboxIndex).position().left; //left值為最小高度盒子的left值
});
//為使每個盒子不重疊，每當排完一行時就重新計算每一排的最小高度的盒子 =>方法：讓排好的盒子計算當前列的高度進行排列
boxArr[minboxIndex] += box.eq(index).height() + 10; //最后加10是讓第一排之后的盒子上下有間隙為10px
}
});
};
});
</script>
css部分：
*{ padding: 0; margin: 0;}
#container{ width: 90%; margin: 0 auto;}
.box{ position: relative; float: left; margin-left: 5px; margin-right: 5px; }
.content{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 2px #ccc;}
.content img{ width: 210px; height: auto;}
.content h4{ font-size: 14px; color: #777； margin: 5px 0;}
html部分：
<div id="container">
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="">
<h4>This is a pic title</h4>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="">
<h4>This is a pic title</h4>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="">
<h4>This is a pic title</h4>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/1.jpg" alt="">
<h4>This is a pic title</h4>
</div>
</div>
<!-- 重復多些box -->
</div>