利用jquery实现瀑布流3种案例

// 把转化后的字符串绑定在compileFunction函数上!
var compileFunction = _.template(templateString);//_.template（）返回的是一个函数！
// console.log(typeof(compileFunction)); //function

//转换成jquery对象,为了后面使用jquery的方法
var $waterfall = $("#waterfall");
var $loading = $(".loading");

//三列瀑布流，每列的总高度
var colHeight = [0,0,0];
// 这是三列的高度数组，与里面的数值无关，表示index的顺序
// console.log(colHeight);

// 获取数据
//信号量
var page = 1;

getJSONandRender(page);

function getJSONandRender(page){
// 为了增加用户体验
$loading.show();

//发出ajax请求
$.get("json/json" + page + ".txt",function(data){ //输出字符串
//转为对象
var dataObj = eval("(" + data + ")"); //解析ajax数据，转换成对象！
//没有更多数据了
// dataObj.news.length来自后台json
if(dataObj.news.length == 0){
$loading.show().html("没有更多了");
return; //在这里截止后，lock也会截止
}

// 遍历函数，动态获取下标值根据绝对定位的位置进行排列！
_.each(dataObj.news,function(dictionary){ //每遍历一次，执行一次函数！
//这是系统内置构造函数
var image = new Image(); //实例化一个对象分配内存空间
// 当对象被实例化后，构造函数会立即执行它所包含的任何代码
image.src = dictionary.imgurl;
//我们现在给image转为jQuery对象，然后绑定事件
$(image).load(function(){
// console.log(dictionary.imgurl + "加载完毕");
var domString = compileFunction(dictionary);
// console.log(typeof(domString));
var $grid = $(domString);
$waterfall.append($grid);
//根据瀑布流算法，设置它的left、top
// 最小值
minValue = _.min(colHeight);
// 最小值的位置！
minIndex = _.indexOf(colHeight,minValue);
$grid.css({
"top" : minValue,
"left" : minIndex * 270
});
//改变总列高数组的值
colHeight[minIndex] += $grid.outerHeight() + 10;

//让大盒子根据最高的列设置高度
$waterfall.css("height",_.max(colHeight));

//隐藏loading文本
$loading.hide();
});
});

lock = true;
});
}

var lock = true;
//监听滚动
$(window).scroll(function(){
if(!lock) return;
var rate = $(window).scrollTop() / ($(document).height() - $(window).height());

if(rate >= 0.7){
page ++;
getJSONandRender(page);
lock = false;
}
})
</script>
</body>
</html>