jquery瀑布流布局

Html

Css

* {
	padding:0;
	margin:0;
}
#main {
	position:relative;
}
.pin {
	padding:15px 0 0 15px;
	float:left;
}
.box {
	padding:10px;
	border:1px solid #ccc;
	box-shadow:0 0 6px #ccc;
	border-radius:5px;
}
.box img {
	width:162px;
	height:auto;
}

$(window).on("load", function() {
    waterfall('main', 'pin');
    var dataInt = {
        'data': [{
            'src': '1.jpg'
        }, {
            'src': '2.jpg'
        }, {
            'src': '3.jpg'
        }, {
            'src': '4.jpg'
        }]
    };
    window.onscroll = function() {
        if (checkscrollside()) {
            $.each(dataInt.data, function(index, value) {
                var $oPin = $('<div>').addClass('pin').appendTo($("#main"));
                var $oBox = $('<div>').addClass('box').appendTo($oPin);
                $('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($oBox);
            });
            waterfall();
        };
    }
});

/*
    parend 父级id
    pin 元素id
*/
function waterfall(parent, pin) {
    var $aPin = $("#main>div");
    var iPinW = $aPin.eq(0).width(); // 一个块框pin的宽
    var num = Math.floor($(window).width() / iPinW); //每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
    //oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
    $("#main").css({
        'width:': iPinW * num,
        'margin': '0 auto'
    });

var pinHArr = []; //用于存储 每列中的所有块框相加的高度。

$aPin.each(function(index, value) {
        var pinH = $aPin.eq(index).height();
        if (index < num) {
            pinHArr[index] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
        } else {
            var minH = Math.min.apply(null, pinHArr); //数组pinHArr中的最小值minH
            var minHIndex = $.inArray(minH, pinHArr);
            $(value).css({
                'position': 'absolute',
                'top': minH + 15,
                'left': $aPin.eq(minHIndex).position().left
            });
            //数组 最小高元素的高 + 添加上的aPin[i]块框高
            pinHArr[minHIndex] += $aPin.eq(index).height() + 15; //更新添加了块框后的列高
        }
    });
}

function checkscrollside() {
    var $aPin = $("#main>div");
    var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height() / 2); //创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
    var scrollTop = $(window).scrollTop() //注意解决兼容性
    var documentH = $(document).width(); //页面高度
    return (lastPinH < scrollTop + documentH) ? true : false; //到达指定高度后 返回true，触发waterfall()函数
}

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

立即下载

jquery瀑布流布局



代码描述：jquery实现无限滚动瀑布流

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

龙

相关代码

jquery瀑布流布局

最新