简单的瀑布流模拟

Html

Css


    不同形状的瀑布流
    

    
    
        正在加载中。。。

.title {
	text-align:center
}
.waterfall-content {
	position:relative;
}
/*.waterfall-item.active {
	opacity:0;
}
*/
    .waterfall-item {
	position:absolute;
	border:1px solid #ccc;
	border-radius:4px;
	padding:1em;
}
.waterfall-item img {
	width:100%;
	max-width:100%;
}
.get-more-line {
	opacity:0
}

$(function() {
    var boxWidth = $('.waterfall-content').width(), //总共的数据
        allNum = 33, //总共的数据
        initNum = 10, //初始化显示数据
        rows =5, //每行显示数量
        HS = boxWidth * 0.02, //每个图片的水平间距
        VS = boxWidth * 0.02, //每个图片的垂直间距
        itemWidth = (boxWidth - HS * (rows - 1)) / rows, //每个图片的宽度
        remainNum = allNum, //剩余未展示的数据
        maxNum = rows * 2, //每次显示的最大数量 ,
        showNum = maxNum, //每次显示的数量
        itemArr = [];

//根据每行显示的数量组成创建一个数组来保存每一列的属性
    for (var i = 0; i < rows; i++) {
        itemArr[i] = {
            left: itemWidth * i + HS * i,
            top: 0,
            position: 'absolute',
            width: itemWidth,
            height: 'auto'
        };
    }
    showNum = initNum;  //设置初始化显示数据
    init();

//滚动判断是否动态显示数据
    $(window).scroll(function() {
        installData();
    })

//组装动态数据
    function installData() {
        var activeNum = $('.waterfall-item.active').length; //正在显示的数量，如果存在，则说明已经有图片正在加载
        if (remainNum > 0) { //有剩余的数据
            if (activeNum <= 0) { //可以生成列表的标志，避免重复操作
                var hiddenHeight = $(document).height() - $(window).height(), //获取文档高度和可视屏之差
                    scrollTop = $(document).scrollTop(); //滚动条离顶部的高度
                if (hiddenHeight - scrollTop <= 200) { //距离顶部的距离小于等于200触发
                    if (remainNum > 0 && remainNum < maxNum) {
                        showNum = remainNum;
                    } else if (remainNum >= maxNum) {
                        showNum = maxNum;
                    }
                    remainNum = remainNum - showNum;
                    init(function() {
                        if (remainNum <= 0) {
                            $('.get-more-line > span').addClass('disabled').text('已经到底了');
                            $('.get-more-line').animate({
                                opacity: 1
                            });
                        }
                    });
                }
            }
        }
    }

//组装动态数据
    function init(callBack) {
        var counter = 0,
            key = 0;
        $('.get-more-line').animate({
            opacity: 1
        });
        for (var i = 0; i < showNum; i++) {
            $('.waterfall-content').append('<div class="waterfall-item active" style="opacity: 0">' + randomGetImg() + '</div>');
        }
        var imgLength = $('.waterfall-item.active img').length;
        $('.waterfall-item.active').each(function(index) {
            $(this).find('img').load(function() {
                  
                var _thisBox = $('.waterfall-item.active img').eq(index).parents('.waterfall-item');
                _thisBox.css(itemArr[key]);
                counter++;
console.log('-------------------');
                 console.log(counter);console.log(imgLength) ;
                if (counter == imgLength) {
                    
                    console.log(counter );
                    counter = 0;
                    $('.waterfall-item.active').each(function(i) {
                        // console.log($(this).outerHeight(true));
                        var _thisHeight = $(this).outerHeight(true);
                        key = i % rows; //对每次所需展示图片 和 每列展示数量 求余 ，则得到当前需要展示的数组的key值
                        $(this).css(itemArr[key]);
                        var oldTop = itemArr[key].top;
                        itemArr[key].top = oldTop + VS + _thisHeight;
                        counter++;
                        if (counter == imgLength) {
                            counter = 0;
                            var allHeight = 0;
                            for (var j in itemArr) {
                                if (itemArr[j].top > allHeight) {
                                    allHeight = itemArr[j].top;
                                }
                            }
                            $('.get-more-line').animate({
                                opacity: 0
                            }, 'fast', function() {
                                $('.waterfall-content').css({
                                    height: allHeight + 20
                                });
                                $('.waterfall-item.active').removeClass('active').animate({
                                    'opacity': 1,
                                }, 'normal', function() {
                                    if (callBack != undefined) {
                                        callBack();
                                    }
                                })
                            });
                        }
                    })
                }
            });
        });
    }

//随机获取图片
    function randomGetImg() {
        var num = parseInt(9 * Math.random()),
            sizeArr = ["500x500", "500x300", "300x500"],
            size = sizeArr[parseInt(3 * Math.random())],
            imgUrl = 'http://www.jq22.com/img/cs/' + size + '-' + (num + 1) + '.png';
        return '<img src="' + imgUrl + '" />';
    }
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简单的瀑布流模拟



代码描述：jQuery无限滚动瀑布流,图片长宽都不一样

简单的瀑布流模拟，每一张图片采用绝对布局，因此就需要计算每一张图片的高度，需等图片加载完成才能计算

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

liliangbo

相关代码

不同形状的瀑布流