jquery实现瀑布流显示

Html

Css

 * {
	padding:0;
	margin:0;
}
.wrap {
	position:relative;
	width:80%;
	margin:0 auto;
	text-align:center;
	border:1px solid red;
}
.gard {
	width:150px;
	background-color:brown;
	margin:5px;
	height:70px;
	position:absolute;
}

$(function () {
        let wrap=$('.wrap');
        let item=$('.gard');
        let gutter=5;
        let wrapwidth=wrap[0].getBoundingClientRect().width;
        let itemwidth=item[0].getBoundingClientRect().width+gutter;
        let cols=Math.max(Math.floor(wrapwidth/itemwidth),1);
         wrap.css('width',cols*(itemwidth+gutter));
        let arr1=[],arr2=[];
        for(g=0;g<cols;g++)
        {
            arr1.push((itemwidth)*g+gutter);
            arr2.push(gutter);
        }
        item.each(function (i) {
            let itemIndex = arr2.slice(0).sort(function (a, b) {
                return a - b;
            }).shift();
            let index=arr2.indexOf(itemIndex);
            var posX = arr1[index];
            var posY = arr2[index];
           $(this).animate({'left':posX,'top':posY},'0.5s');
           console.log(posX+','+posY);
           arr2[index] += this.getBoundingClientRect().height + gutter;
           console.log( arr2[index]);
            var containerHeight =arr2.slice(0).sort(function (a, b) {
                return a - b;
            }).pop();
            wrap[0].style.height = containerHeight + 'px';
        })

})

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

立即下载

jquery实现瀑布流显示



代码描述：简单易懂瀑布代码

实现原理，先获取块的宽度，求出列数，容器适应宽度，求出每行较小的块的高度，将后面的块定位到他的下面

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

(?? . ??)

相关代码

jquery实现瀑布流显示

最新