jQuery实现图片瀑布流

Html

Css

#main {
	width:1200px;
	margin:0 auto;
	position:relative;
}
* {
	margin:0;
	padding:0;
}
.box {
	width:200px;
	padding:5px;
	border:1px solid #ccc;
	box-shadow:0 0 6px #ccc;
	border-radius:5px;
	margin:5px;
	float:left;
}
.box img {
	width:100%;
}

$(window).on('load', function() {
    writerFull();
    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'
            },
            {
                src: 'http://www.jq22.com/img/cs/300x500-2.png'
            },
            {
                src: 'http://www.jq22.com/img/cs/500x300-2.png'
            },
            {
                src: 'http://www.jq22.com/img/cs/500x500-9.png'
            },
        ]
    }
    $(window).on('scroll', function() {
        if (checkSlider()) {
            $.each(dataInt.data, function(key, value) {
                var oBox = $('<div>').addClass('box').appendTo($('.pubu'));
                var oImg = $('<img>').attr('src', $(value).attr('src')).appendTo(oBox)
            })
        }
        writerFull();
    });
})

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

立即下载

jQuery实现图片瀑布流



代码描述：jQuery实现无限加载图片瀑布流

更新时间：2020-08-14 01:33:17
jq实现图片瀑布流

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

一滴水

相关代码

jQuery实现图片瀑布流

最新