瀑布流布局
2017-10-03 本文已影响0人
阿鲁提尔
实现一个瀑布流布局效果
瀑布流
宽度相等的，高度是随机的
原理：
有一个数组，数组里面有5个值（横向算），里面存储着对应纵数的高度，当每一次加载下一张图片时，挑选数组的值最矮的那个，找到它的下标（横向第几个），垂直距离就是最矮的那个值，然后把加载的图片元素放到这个的位置。
步骤：
首先需要先创建一个数组，数组里面存储的是每一列的高度之和，这个数组的值由容器的宽度和单个图片的宽度决定（容器的宽度/单个图片的宽度，取整得到）。
刚开始，数组的高度为0，得到5列，从数组里面找到一个最小值，获取下标，把元素放到对应的位置上。
放置过程中，
元素的水平位置：（下标 乘以 元素宽度）；
元素的垂直位置：（这个数组以前的高度）；
放置完成后，
把当前的位置上的下标值加上当前元素的高度，这个数组就更新了。下次再添加图片时，遵循同样逻辑，把所有的图片循环一遍。
CSS部分
.content{
position: relative;
}
.item{
position: absolute;
width: 200px;
margin-top: 10px;
margin-right: 10px;
transform: all 1s;
}
.h1{
height: 200px; background-color: #f4b300;
}
.h2{
height: 300px; background-color: #691bb8;
}
.h3{
height: 400px; background-color: #006ac1;
}
HTML
<div class="content">
<div class="item h1">1</div>
<div class="item h3">2</div>
<div class="item h2">3</div>
<div class="item h1">4</div>
<div class="item h1">5</div>
<div class="item h3">6</div>
<div class="item h3">7</div>
<div class="item h2">8</div>
<div class="item h1">9</div>
<div class="item h3">10</div>
<div class="item h3">11</div>
<div class="item h3">12</div>
<div class="item h2">13</div>
<div class="item h2">14</div>
</div>
jQuery部分
var colLength = parseInt($('.content').width()/$('.item').width())
//获取列数
var itemArr = []
//定义一个数组，给数组一个初始化。
for(var i = 0; i <colLength;i++){
itemArr[i] = 0
}
$('.item').each(function(){
var minValue = Math.min.apply(null,itemArr)
//得到数组最小值
var minIndex = itemArr.indexOf(minValue)
//得到最小值下标
$(this).css({
//定义css
top: itemArr[minIndex],
//设置top值
left: $(this).outerWidth(true) * minIndex
//设置left值：自己的宽度 x 最小列
})
itemArr[minIndex] += $(this).outerHeight(true)
//对应的位置 += 自己元素的高度
})
Query提供多个处理尺寸的重要方法：
jQuery提供多个处理尺寸的重要方法.jpg
//要实现一个动态的，当窗口发生改变时，重新做一个排列
waterfull()
//当页面进来的时候，执行以下
$(window).resize(function(){
//当窗口的尺寸发生变化的时候
//是$(window).on('resize',function(){})简化版
waterfull()
})
function waterfull(){
//上面的jquery代码
}
//封装
var waterFall = (function(){
function init(){
waterFall()
$(window).resize(function(){
waterFall()
})
}
function waterFall(){
var colLength = parseInt($('.content').width()/$('.item').width())
var itemArr = []
for(var i = 0; i < colLength; i++){
itemArr[i] = 0
}
$('.item').each(function(){
var minValue = Math.min.apply(null,itemArr)
var minIndex = itemArr.indexOf(minValue)
$(this).css({
top:itemArr[minIndex],
left:$(this).outerWidth(true)*minIndex
})
itemArr[minIndex]+=$(this).outerHeight(true)
})
}
return{
init:init
}
})()
waterFall.init()
