js瀑布流

<style type="text/css">
.masonry {
width: 100%;
margin-top: 50px;
position:relative;
}
.item {
z-index: 10;
transition: 0.25s;
overflow: hidden;
position: absolute;
}
.item img{
width: 100%;
height:100%;
transition: 0.25s;
}
.item:hover img{
z-index: 100;
transition: 0.25s;
overflow: hidden;
animation: bounceIn 0.25s ease-in 2 alternate;
}
@keyframes bounceIn{
100% {
transform: scale(1.07);
}
}
</style>
<div class="masonry">
<div class="item">
<img class="lazy" src="img/15.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/1.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/2.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/3.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/4.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/5.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/6.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/7.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/8.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/9.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/10.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/11.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/12.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/13.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/14.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/16.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/17.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/18.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/19.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/20.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/21.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/22.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/23.png" alt="" />
</div>
<div class="item">
<img class="lazy" src="img/24.png" alt="" />
</div>
</div>
<script type="text/javascript">
//瀑布流效果
//这里有一个坑（已经修复）：
//因为是动态加载远程图片，在未加载完全无法获取图片宽高
//未加载完全就无法设定每一个item(包裹图片)的top。

//item的top值：第一行：top为0
// 其他行：必须算出图片宽度在item宽度的缩小比例，与获取的图片高度相乘，从而获得item的高度
// 就可以设置每张图片在瀑布流中每块item的top值（每一行中最小的item高度，数组查找）
//item的left值：第一行：按照每块item的宽度值*块数
// 其他行：与自身上面一块的left值相等
function waterFall() {
// 1- 确定图片的宽度 - 滚动条宽度
var pageWidth = getClient().width-8;
var columns = 3; //3列
var itemWidth = parseInt(pageWidth/columns); //得到item的宽度
$(".item").width(itemWidth); //设置到item的宽度

var arr = [];

$(".masonry .item").each(function(i){
var height = $(this).find("img").height();
var width = $(this).find("img").width();
var bi = itemWidth/width; //获取缩小的比值
var boxheight = parseInt(height*bi); //图片的高度*比值 = item的高度

if (i < columns) {
// 2- 确定第一行
$(this).css({
top:0,
left:(itemWidth) * i
});
arr.push(boxheight);

} else {
// 其他行
// 3- 找到数组中最小高度 和 它的索引
var minHeight = arr[0];
var index = 0;
for (var j = 0; j < arr.length; j++) {
if (minHeight > arr[j]) {
minHeight = arr[j];
index = j;
}
}
// 4- 设置下一行的第一个盒子位置
// top值就是最小列的高度
$(this).css({
top:arr[index],
left:$(".masonry .item").eq(index).css("left")
});

// 5- 修改最小列的高度
// 最小列的高度 = 当前自己的高度 + 拼接过来的高度
arr[index] = arr[index] + boxheight;
}
});
}


//clientWidth 处理兼容性
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}



// 页面尺寸改变时实时触发
window.onresize = function() {
//重新定义瀑布流
waterFall();
};



//初始化

waterFall();
</script>