三、模版的引用（由于本例子中数据的展示样式都一致，在这里我引用模版artTemplate）关

1. 记得要先引入这个模版的js包； 2. 定义模版的模块要有一个id，还有设置type；

四、js控制瀑布流的效果

1. 这里，我请求了两个PHP分别返回了两个模拟数据；

<div class="jb51code">
<pre class="brush:js;">
$(function() {
//页面一加载就出现的图片，对应实际百度图片中点击搜索图片
$.ajax({
url: "./reset.PHP",dataType: "json",success: function(data) {
var obj = {
items: data
};
var result = template("template",obj);
$(".items").html(result);
waterfall();
}
});
});

// 编写瀑布流js

function waterfall() {
//计算出显示盒子宽度
var totalWidth = $(".items").width();
//计算出单张图片宽度（每张图片宽度是一致的）
var eachWidth = $(".items .item").width();
//计算出一行能排布几张图片
var columNum = Math.floor(totalWidth / eachWidth);
//将剩余的空间设置成外边距
var margin = (totalWidth - eachWidth * columNum) / (columNum + 1);
//定义一个数组用来填充高度值
var heightArr = [];
for (var i = 0; i < columNum; i++) {
heightArr[i] = 0;
}

//摆放位置 摆放在最小高度处
var elementItems = $(".items .item");
elementItems.each(function(idx,ele) {
//取得一行中高度最小值及其索引
//定义初始的最小值及其索引值
var minIndex = 0;
var minValue = heightArr[minIndex];
for (var i = 0; i < heightArr.length; i++) {
if (heightArr[i] < minValue) {
minIndex = i;
minValue = heightArr[i];
}
}

$(ele).css({
//注意点：这儿乘上的是最小值所在的索引idx
left: margin + (margin + eachWidth) * minIndex,top: minValue
});

//重新计算高度，更新高度数组
var oldHeight = heightArr[minIndex];
oldHeight += $(ele).height() + margin;
heightArr[minIndex] = oldHeight;
});

return heightArr;

}

$(window).on("scroll",function() {
if (toBottom()) {
$(".tips").css("opacity",1);
$.ajax({
url: "./index.php",success: function(data) {
var dataItem = {
items: data
};
var res = template("template",dataItem);
$(".items").append(res);
waterfall();
$(".tips").css("opacity",0);
}
});
}
});

//判断是否已经到底部了
function toBottom() {
var scrollTop = $(window).scrollTop();
var clientHeight = $(window).height();
var offsetTop = $(".items .item:last-child").offset().top;
console.log(scrollTop + "..." + clientHeight + "..." + offsetTop);
if (scrollTop + clientHeight > offsetTop) {
return true;
} else {
return false;
}
}