jquery瀑布流布局

Html

Css

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

/**
 * Created by zyn on 2017/6/8.
 */
$(window).on('load', function() {
    waterfall();
    var dataInt = {
        "data": [{
            "src": "http://www.jq22.com/img/cs/500x500-1.png"
        }, {
            "src": "http://www.jq22.com/img/cs/500x300-2.png"
        }, {
            "src": "http://www.jq22.com/img/cs/300x500-9.png"
        }]
    };
    $(window).on('scroll', function() {
        if (checkScrollSlide) {
            $.each(dataInt.data, function(key, value) {
                //  console.log(value);
                var oBox = $('<div>').addClass('box').appendTo($('#main'));
                var oPic = $('<div>').addClass('pic').appendTo($(oBox));
                var oImg = $('<img>').attr('src', $(value).attr('src')).appendTo($(oPic));
            })
            waterfall();
        }
    })
})

function checkScrollSlide() {
    var $lastBox = $('#main>div').last();
    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);
    var scrollTop = $(window).scrollTop();
    var documentH = $(window).height();
    return (lastBoxDis < scrollTop + documentH) ? true : false;
}

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

立即下载

jquery瀑布流布局



代码描述：jQuery无限滚动瀑布流

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

三都

相关代码

jquery瀑布流布局

最新