<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>瀑布流布局</title>
<style>
.waterfall {
max-width: 600px;
margin: 0 auto;
}
.waterfall img{
width: 100px;
margin: 10px;
position: absolute;
transition: all .4s;
}
</style>
</head>
<body>
<div class="waterfall">
<img src="http://via.placeholder.com/100x100" alt="300*100">
<img src="http://via.placeholder.com/100x70" alt="300*70">
<img src="http://via.placeholder.com/100x150" alt="300*150">
<img src="http://via.placeholder.com/100x250" alt="300*250">
<img src="http://via.placeholder.com/100x80" alt="300*80">
<img src="http://via.placeholder.com/100x90" alt="300*90">
<img src="http://via.placeholder.com/100x120" alt="300*120">
<img src="http://via.placeholder.com/100x210" alt="300*210">
<img src="http://via.placeholder.com/100x230" alt="300*230">
<img src="http://via.placeholder.com/100x100" alt="300*100">
<img src="http://via.placeholder.com/100x70" alt="300*70">
<img src="http://via.placeholder.com/100x150" alt="300*150">
<img src="http://via.placeholder.com/100x250" alt="300*250">
<img src="http://via.placeholder.com/100x80" alt="300*80">
<img src="http://via.placeholder.com/100x90" alt="300*90">
<img src="http://via.placeholder.com/100x120" alt="300*120">
<img src="http://via.placeholder.com/100x210" alt="300*210">
<img src="http://via.placeholder.com/100x230" alt="300*230">
</div>
<script>
var colCount//内容列数
var colHeightArray = []//每一列高度集合
var imgWidth = $('.waterfall img').outerWidth(true)//图片宽度
colCount = Math.floor($('.waterfall').width()/imgWidth)
for(var i = 0;i < colCount;i++){
colHeightArray[i] = 0
}//循环添加高度集合的初始值，有几列就对应有几个初始的值—‘0’
$('.waterfall img').on('load',function(){
var minValue = colHeightArray[0]
var minIndex = 0
for(var i=0;i<colCount;i++){
//每次放置图片是判断处于长度最短的下标
if(colHeightArray[i]<minValue){
minValue = colHeightArray[i]
minIndex = i
}
}
//给即将放置的图片添加绝对定位
$(this).css({
left:minIndex * imgWidth,
top:minValue
})
//给刚才添加的那一列补充高度
colHeightArray[minIndex] += $(this).outerHeight(true)
})
</script>
</body>
</html>
瀑布流学习笔记
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 商品展示 进度条长度的设置 : 取决于商品的长度 scroll家族 window.onscroll只要当滚动条滚动...
