jquery瀑布流布局

Html

Css

* {
	padding:0px;
	margin:0px;
}
#box {
	width:1150px;
	margin:100px auto;
}
#box ul li {
	list-style:none;
	width:250px;
	background:#fff;
	float:left;
	padding:5px;
	margin:5px;
	box-shadow:0px 0px 5px #000;
}
img {
	width:250px;
	transition:1s;
}

var arr = [{
        src: "http://www.jq22.com/img/cs/500x300-1.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-2.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-3.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-4.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-5.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-6.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-7.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-8.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-9.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-1.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-2.png"
    },
    {
        src: "http://www.jq22.com/img/cs/500x300-3.png"
    }
];

//生成图片
var i = 0;

function create() {
    //创建一个盒子来放置图片
    var oDiv = document.createElement("div");
    //生成一个图片对象
    var oImg = new Image();
    oImg.src = arr[i % arr.length].src;
    oImg.style.cssText = "opacity:0;transform: scale(0);";
    oDiv.appendChild(oImg);
    //把DIV添加到小的li里面
    getList($("#box ul li")).append(oDiv);
    //图片缓慢放大
    setTimeout(function() {
        oImg.style.cssText = "opacity:1;transform: scale(1);";
    }, 1000)

}
//获取li列表 对比高度 高度小的就添加图片
function getList(obj) { //obj形参替代li
    var h = Infinity;
    var getlist = '';
    for (var i = 0; i < obj.length; i++) {
        if (obj.eq(i).height() < h) {
            h = obj.eq(i).height();
            getlist = obj.eq(i);
        }

}
    return getlist;
}
//动态添加图片
var sum = 0;

}
}
upload();

//滚动条事件  动态添加事件
var srollH = 0; //滚动高度
var domH = 0;
var sheight = $(window).height(); //浏览器可视高度
$(window).scroll(function() {
    srollH = $(window).scrollTop(); //滚动条高度
    //console.log(srollH);
    domH = $(document).height(); //获取文档高度
    if (sheight + srollH + 50 > domH) {
        upload();
    }
});

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

立即下载

jquery瀑布流布局



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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

me

相关代码

jquery瀑布流布局

最新