<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
*{margin: 0;padding: 0;}
#container{
width: 1000px;border: 1px solid red;margin: 50px auto 0;
position: relative;
}
#container img{
position: absolute;
}
#loader{
width: 100%;height: 60px;background: url('01.jpg') no-repeat center #FFF;position: fixed;bottom: 0;left: 0;display:
}
</style>
<script src="../jquery.min.js" type="text/javascript" ></script>
<script>
$(function () {
var iWidth=200, //列宽
iSpace=10, //间隔宽
iOuterWidth=iWidth+iSpace, //列实际宽
oContainer=$("#container"),
oLoader=$("#loader");
var iCells=0, //总列
iPage=0;
var sUrl="http://www.wookmark.com/api/json/popular?callback=?" ;
var arrL=[],
arrT=[];
var iBtn=true;
function setCells () {
iCells=Math.floor($(window).innerWidth()/iOuterWidth);
document.title=iCells;
oContainer.css("width",iOuterWidth*iCells-iSpace);
}
setCells();
for (var i = 0; i < iCells; i++) {
arrT.push(0)
arrL.push(i*iOuterWidth);
}
//console.log(arrT);
function getData () {
if(iBtn){
iBtn=false;
oLoader.show();
$.getJSON(sUrl, "page="+iPage, function(data) {
//console.log(data);
$.each(data,function (index,obj) {
var oImg=$("<img/>");
oImg.attr('src', obj.preview);
oContainer.append(oImg);
var iHeight=iWidth/obj.width*obj.height;
oImg.css({
width:iWidth,
height:iHeight
});
//获取arrT最小所在位置
var iMinIndex=getMin();
// 设置定位
oImg.css({
left:arrL[iMinIndex],
top:arrT[iMinIndex]
});
arrT[iMinIndex]+=iHeight+10;
oLoader.hide();
iBtn=true;
});
});
}
}
getData();
$(window).on("scroll",function () {
var iH=$(window).scrollTop()+$(window).innerHeight();
var iMinIndex=getMin();
if (arrT[iMinIndex]+oContainer.offset().top<iH) {
iPage++;
getData();
}
});
function getMin () {
var iv=arrT[0];
var _index=0;
for (var i = 1; i < arrT.length; i++) {
if(arrT[i]<iv){
iv=arrT[i];
_index=i;
}
}
return _index;
}
});
</script>
</head>
<body>
<div id="container"></div>
<div id="loader"></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
