插件:http://www.jq22.com/jquery-info9336
http://www.cnblogs.com/2050/archive/2012/05/03/2480702.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
border: 1px solid red;
margin: 50px auto 0;
position: relative;
}
#container img {
position: absolute;
}
#loader {
width: 100%;
height: 60px;
background: url('loader.gif') no-repeat center #FFF;
position: fixed;
bottom: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="loader"></div>
<!--<img onerror="javascript:this.src = 'default.jpg';" alt="">-->
</body>
<script src="../../jquery-1.11.3.min.js"></script>
<script>
$(function () {
var $oContainer = $('#container'),
$oLoader = $('#loader'),
iWidth = 200,
iSpace = 10,
iOuterWidth = iWidth + iSpace,
iCells = 0,
sUrl = 'http://www.wookmark.com/api/json/popular?callback=?',
iPage = 0,
iBtn = true,
arrCells = [];
setCellsAndContainer();
/*init top and left*/
initCellTopAndLeft();
getData();
$(window).on('scroll', function () {
getDataAtBottom();
});
$(window).on('resize', function () {
/*优化处理setCells();只有当列数发生变化,才调用,否则return*/
var iOldCells = iCells;
setCellsAndContainer();
if(iOldCells == iCells){
return;
}
getDataAtBottom();
/*init top and left*/
initCellTopAndLeft();
var $aImgs = $oContainer.find('img');
$aImgs.each(function () {
//获取最短列的位置
var iMinIndex = getShortestIndex();
$(this).animate({
left: arrCells[iMinIndex].left,
top: arrCells[iMinIndex].top
});
arrCells[iMinIndex].top += $(this).height() + 10;
});
});
function getData() {
if (!iBtn) {
return;
}
iBtn = false;
iPage++;
$.getJSON(sUrl, {page:iPage}, function (data) {
$('#loader').show();
//data is a Array
$.each(data, function (index, obj) {
var $oImg = $('<img onerror="javascript:this.src=\'default.jpg\';this.onerror=null">');
var iHeight = iWidth / obj.width * obj.height;
$oImg.css({
width: iWidth,
height: iHeight ? iHeight : 240 //防止iHeight没有值
});
//获取最短列的位置
var iMinIndex = getShortestIndex();
$oImg.css({
left: arrCells[iMinIndex].left,
top: arrCells[iMinIndex].top
});
arrCells[iMinIndex].top += iHeight + 10;
$oContainer.append($oImg);
var objImg = new Image();
objImg.onload = function(){
$oImg.attr('src', this.src);
}
$oImg.attr('src', obj.preview);
setTimeout(function() {
$('#loader').hide();
},1000);
iBtn = true;
})
});
}
function getDataAtBottom() {
var iShortestIndex = getShortestIndex();
var iH = $(window).scrollTop() + $(window).innerHeight();
document.title = iH + ':' + (arrCells[iShortestIndex].top + 50);
if (arrCells[iShortestIndex].top + $oContainer.offset().top <= iH) {
getData();
}
}
function getShortestIndex() {
var iv = arrCells[0].top;
var _index = 0;
for (var i = 1; i < arrCells.length; i++) {
if (arrCells[i].top < iv) {
_index = i;
}
}
return _index;
}
function initCellTopAndLeft() {
for (var i = 0; i < iCells; i++) {
arrCells[i] = {};
arrCells[i].top = 0;
arrCells[i].left = i * iOuterWidth;
}
}
function setCellsAndContainer() {
if (iCells < 3) {
iCells = 3;
}
else if (iCells > 6) {
iCells = 6;
}
iCells = Math.floor($(window).innerWidth() / iOuterWidth);
$oContainer.css('width', iOuterWidth * iCells - iSpace);
}
})
</script>
</html>