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>