瀑布流效果在很多网站还是有的，这种错落有致的排布看着还是很不错的呢。今天我就来记录一下关于用jquery实现瀑布流效果的代码；
一、页面基本排版 1. items盒子主要用来存放我们需要摆放的数据item； 2. tips是页面加载数据的时候用来提示用户的文本；
rush:xhtml;">
瀑布流效果在很多网站还是有的，这种错落有致的排布看着还是很不错的呢。今天我就来记录一下关于用jquery实现瀑布流效果的代码；
一、页面基本排版 1. items盒子主要用来存放我们需要摆放的数据item； 2. tips是页面加载数据的时候用来提示用户的文本；
<div class="jb51code">
<pre class="brush:css;">
body {
text-align: center;
margin: 0;
padding: 0;
background-color: #F7F7F7;
font-family: '微软雅黑';
}
.wrapper {
padding: 50px;
}
img {
display: block;
width: 100%;
height: 300px;
}
.items {
position: relative;
padding-bottom: 10px;
}
.item {
width: 228px;
position: absolute;
border: 1px solid #ddd;
}
.tips {
width: 280px;
height: 40px;
margin: 30px auto 0;
text-align: center;
line-height: 40px;
background-color: #CCC;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -140px;
opacity: 0;
color: #666;
}
.tips.loading {
/background-color: transparent;/
background-color: #dadada;
}
三、模版的引用（由于本例子中数据的展示样式都一致，在这里我引用模版artTemplate）关
1. 记得要先引入这个模版的js包； 2. 定义模版的模块要有一个id，还有设置type；
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;
}
}
如下为返回数据的基本模式，如果想要定义多条数据，只要多复制几条对象就可；
