<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.box {
margin: 0;
padding: 0;
overflow: hidden;
float: left;
width: 200px;
border: 1px solid #eee;
padding: 10px;
}
.box img {
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="box"><img src="http://img02.ma.scrmtech.com/7ceb376aef9f613632bd99cbd6ba7fe9" alt=""></div>
<div class="box"><img src="https://img02.ma.scrmtech.com/d196e8c332ddc4612eb538d46c2ca837" alt=""></div>
<div class="box"><img src="https://img02.ma.scrmtech.com/c6cee70f22017f0ff13ad6a533d18f12" alt=""></div>
<div class="box"><img src="https://img02.ma.scrmtech.com/00557663ffefa852773c6782efacd313" alt=""></div>
<div class="box"><img src="https://img02.ma.scrmtech.com/d1e2928be263caf51138e893925e1da7" alt=""></div>
<div class="box"><img src="https://img02.ma.scrmtech.com/d32cdb69aa31412bd12345a41052a227" alt=""></div>
<div class="box"><img src="https://img02.ma.scrmtech.com/c0aa8d4eb2ba043ab299812dccd7536c" alt=""></div>
<script>
// $(function () {
// setTimeout(function () {
// waterFall()
// }, 300)
// })
window.onload = function () {
waterFall()
}
function waterFall() {
// 求出列数
// 创建数组
// 图片遍历循环
var box = $(".box")
var boxWidth = box.outerWidth() //outerWidth() innerWidth
var screenWidth = $(window).outerWidth()
var cols = parseInt(screenWidth / boxWidth)
var heightArr = []
$.each(box, function (index, item) {
console.log($(item).outerHeight())
var boxHeight = $(item).outerHeight()
if (index < cols) {
heightArr[index] = boxHeight
} else {
// 最小图片的高度
// 数组中最小的值 var arr = [100,150,80,300]
var minBoxHeight = Math.min(...heightArr)
var minBoxIndex = $.inArray(minBoxHeight, heightArr)
console.log(minBoxHeight, minBoxIndex)
$(item).css({
position: "absolute",
left: minBoxIndex * boxWidth + 8 + "px",
top: minBoxHeight + 10 + "px"
})
// 高度追加
heightArr[minBoxIndex] += boxHeight
}
})
}
</script>
</body>
</html>
