jqeury瀑布流,最简单的js+php瀑布流
瀑布流火过一些时间了，以前自己用的都是下的别人写好了的插件，用着到是还行！
近两天研究了一下瀑布流的原理同时也遇到了相关的问题记录下来也许还有用。
直接上源码：
html
[html]
<div id="container" data-id="0"></div>
<div class="loading">
<img src="loading.gif" />
</div>
[/html]
[js]
<script>
var site_url = 'http://dutuwang.net';//网站地址
var pagesize = 20;//每次加载的数据量
var columnWidth = 224;//块宽度
var gutterWidth = 15;//间隔
var pos = {left: 0, top: 0};
var dw = 0;
var dh = 0;
var onOff = true;
$(function(){
//初始化
var init = function(box){
var c = $(box);
$(".loading").fadeIn();
var width = $(document).width();
var td = Math.floor(width / (columnWidth + gutterWidth));//计算一行能放多少列
var p = c.attr('data-id');
var href;
if (onOff)
{
onOff = false;
//取数据
$.get('ajax_json.php', {page: p, pagesize: pagesize}, function(data){
var html = '';
if (data && data.data != 'null')
{
c.attr('data-id', (parseInt(p) + 1));//记录加载次数即分页
var d = data.data;
var l = d.length;
var ch = temp = 0;
$(".loading").fadeOut();
for (var i = 0; i < l ; i++ )
{
var item = $(".item").length;//获取已经加载了的数据条数
var tr = Math.ceil(item / td);//计算现有多少行数据
var prepos = 0;
if (tr > 1 || item >= td)
{
prepos = $('.item').eq((item - td)).height()+15;
pos.top = $('.item').eq((item - td)).offset().top + prepos;
}//top获取，必须是大于一行的数据
if (i%td == 0)
{
pos.left = 0;
}//换行
html += '<div class="item" style="left:'+pos.left+'px;top:'+pos.top+'px;">';
html += '<p><img src="'+d[i]['litpic']+'" alt="'+d[i]['description']+'" width="'+d[i]['iw']+'" height="'+d[i]['ih']+'" /></p>';
html += '<p><a href="'+site_url+href+'.html" title="'+d[i]['title']+'" target="_blank">('+item+')'+d[i]['title']+'</a></p>';
html += '</div>';//块数据
pos.left += (columnWidth + gutterWidth);
c.append(html);
html = '';
ch = $(".item").eq(item).height()+30;
if (ch > temp)
{
temp = ch;
}
if (i%td == (td-1))
{
c.height(c.height() + temp);
temp = 0;
}
}
onOff = true;
}else{
html = 'page load over!';
c.append(html);
}
},'json');
}
};
init('#container');
//滚动到底部小于100px的时候加载新的数据
$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
var documentH = $(document).height();
var winH = $(window).height();
//alert(documentH);
if ((documentH - scrollTop - winH) < 100)
{
init('#container');
}
});
//改变窗口宽度重新排列
$(window).resize(function(){
resize("#container", ".item");
});
var resize = function(box, item){
var c = $(box);
var b = $(item);
c.height(0);
var width = $(window).width();
var td = Math.floor(width / (columnWidth + gutterWidth));
var l = b.length;
b.css({top:0,left:0});
var left = ch = temp = 0;
for (var i = 1; i < l; i++ )
{
left = b.eq(i-1).offset().left + columnWidth + gutterWidth; //宽
ch = b.eq(i).height() + 29; //高
if (ch > temp)
{
temp = ch;
}
var top = 0;
if (i >= td)
{
var offsetTop = b.eq(i-td).offset().top;
var iH = b.eq(i-td).height();
top += (offsetTop+iH+15);
}
if (i%td == 0)
{
left = 0;
c.height(c.height()+temp+30);
temp = 0;
}
b.eq(i).css({
top: top + 'px',
left: left + 'px'
});
}
}
});
</script>
[/js]
还有一点小的bug.就是loading的位置
制件瀑布流遇到的问题：
1、块的定位
2、图片的加载是否完成
3、改变窗口大小的问题