瀑布流布局
2018-02-05 本文已影响0人
zy懒人漫游
这是html，首先先定义一个容器ct，里面的div模拟照片，每张照片的宽度一样，高度不一样
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ct">
<div class="item h1">1</div>
<div class="item h2">2</div>
<div class="item h3">3</div>
<div class="item h2">4</div>
<div class="item h1">5</div>
<div class="item h3">6</div>
<div class="item h2">7</div>
<div class="item h2">8</div>
<div class="item h3">9</div>
<div class="item h1">10</div>
<div class="item h1">11</div>
<div class="item h2">12</div>
<div class="item h2">13</div>
<div class="item h1">14</div>
<div class="item h2">15</div>
</div>
</body>
</html>
function waterFull() {
var $ctWidth = $('.ct').width(), //获取容器宽度
$nodeWidth = $('.item').width(), //获取每个节点宽度
colLength = parseInt($ctWidth / $nodeWidth), //获取页面每一行数量
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);
});
}
1、定义好瀑布流函数，
2、然后获取容器的宽度，和每个节点的宽度，因为我们要得到容器里面有几列，初始化数组，让item为0
3、遍历节点数组
4、通过Math.min.apply(null, itemArr)获取到最小值，和最小值的下标
5、最上面开始摆放最小值的下标对应的值，往左偏移的距离是最小的那个的宽度
6、数组的最小值的高度变化
最后还可以优化下代码，将代码进行封装
var Render = (function () {
function init() {
waterFull();
$(window).resize(function () { //窗口尺寸每次变化，执行一次瀑布流
waterFull();
});
}
function waterFull() {
var $ctWidth = $('.ct').width(),//获取容器宽度
$nodeWidth = $('.item').width(),//获取每个节点宽度
colLength = parseInt($ctWidth / $nodeWidth),//获取页面每一行数量
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
};
})();
Render.init();
