今天玩了下瀑布流,有一些心得,就抛砖引玉写在这里了,还请大神指教~
1.新浪风格的瀑布流(姑且就这么说吧)
就是微博登陆那里的最新消息,其实新浪并不是想做成那种瀑布流,只是有人改良而已

特点:
1.实实在在的会动~看上去比较炫
2.加载时带宽消耗很大,后期带宽消耗小
关键代码:

$('#pic_title_a').hover(function(){
    clearInterval(timesa);
},function(){
    timesa = setInterval(function(){
        var Main = $('#pic_title_a');
        var divHeight = Main.find(".pic_img_main:last").height();
        Main.animate({marginTop:divHeight +'px'},1000,function(){
        Main.find(".pic_img_main:last").prependTo(Main);
        Main.find(".pic_img_main:first").hide();
        Main.css({marginTop:0});
        Main.find(".pic_img_main:first").fadeIn(1000);
    });
},3000);
}).trigger('mouseleave');

2.普通风格的瀑布流
代码粘上来有点小乱 将就看看吧
其实关键就是玩了个margin游戏,首先获取竖行中最后一个元素的li高度,然后生成一个动画,慢慢的增加margin-top的数值,但数值等于最后一个li的高度时,将最后一个li移到开头并隐藏起来,然后干掉margin-top,再假兮兮的把移到开头的li用fateIn慢慢显示出来就实现了这个效果了

特点和实现的功能
1.带宽消耗稳定
2.加载时根据浏览器窗口宽度,判断需要生成多少条竖行
3.预留了多少次加载后,启动分页的功能
4.加载时判断各个竖行的高度,自动补齐最小的那个
5.使用定时器取代了判断滚动条位置的做法,避免了补齐最小的竖行后需要手工移动滚动条再次触发事件的问题

关键代码如下:
初始化,根据浏览器窗口的宽度除以竖行div的宽度,判断生成多少条竖行
获取当前页数并加载一些数据垫底

function init(){
    widthDivW = $(widthDiv).width();
    createNum = Math.floor(widthDivW/lineDivW);
    for(var i = 1;i<= createNum; i++)
        $(widthDiv).append('
');
    pageNum = $(pageNumI).val();
    var j = 1;
    for(i = 1; i <= 20; i++){
        if(j > createNum)
            j = 1;
        addData(j);
        j++;
    }
                                                                    
};

加载数据的函数,预留了请求多少次后停止加载显示分页的功能,这样避免了无限制加载带来的问题

function addData(i){
    if(loadNum >= 100)
        return;
    $.post('data.php', {pageNum:pageNum, loadNum:++loadNum}, function(data){
        $('#'+lineDiv+i).append('
'+data.img+'
').children(':last').hide().fadeIn('slow');
    }, 'json');
}

判断滚动条是否在底部,并判断最短的那个竖行DIV

function check(){
    if (($(window).height() + $(window).scrollTop()) >= $(document).height() - 20) {
        var targets = 1;
        for(var i = 1; i < createNum; i++){
            if($('#'+lineDiv+i).height() > $('#'+lineDiv+(i*1+1)).height())
                targets = i*1+1;
        }
        addData(targets);
    }
}

定时器,每500毫秒检测一次滚动条位置,加载后500毫秒不再次加载

setInterval(function(){
    if(lock == true)
        return;
    lock = true;
    setTimeout(function(){
        lock = false;
    }, 500);
    check();
},500);

睡觉了 晚安~

上一篇:测试下代码插件 下一篇:快递查询API