深入探秘jquery瀑布流的实现

瀑布流也应该算是流行几年了吧。首先是由Pinterest掀起的浪潮，然后国内设计如雨后春笋般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不过最近涉黄，好像被喝茶了),还有淘宝的 “哇哦”. 这些都是很棒的例子， 今天我想重新谈起瀑布流，一是想满足我自己的愿望，写一个详细的介绍(不敢自名为教程),二是，给大家一份参考，因为search很多，但是他们给的是一个插件，然后教你怎样配置，当然，也有很多其他的大神也细心的做了很多教程，比如 imooc上面 Amy 姐姐 发布的瀑布流教程，也是很棒的。 而我的目的就是，尽量把一些常见的demo给大家讲解一遍，以及，融合以前学过的设计模式，相当于一个简单的demo.

绝对式布局

不多说，先看一个demo

js

var cal = (function() {
“use strict”;
var $ = function() {
return document.querySelectorAll.apply(document, arguments);
}
var arrHeight = []; //得到分列的高度
var columns = function() { //计算页面最多可以放多少列
var bodyW = document.body.clientWidth,
pinW = $(“.pin”)[0].offsetWidth;
return Math.floor(bodyW / pinW);
}
var getIndex = function(arr) { //获得最小高度的index
var minHeight = Math.min.apply(null, arr); //获得最小高度
for (var i in arr) {
if (arr[i] === minHeight) {
return i;
}
}
}
//根据列数确定第一排img的高度并放入数组当中。
var setWidth = function() { //通过列数设置宽度
var col = columns(), //获得最后一列
main = $(#main)[0]; //获得罩层
main.style.width = col * $(.pin)[0].offsetWidth “px”;
}
var overLoad = function(ele) {
var index = getIndex(arrHeight),
minHeight = Math.min.apply(null, arrHeight), //获取最小高度
pins = $(.pin),
style = ele.style;
style.position = “absolute”;
style.top = minHeight “px”; //设置当前元素的高度
style.left = pins[index].offsetLeft “px”;
arrHeight[index] = ele.offsetHeight;
}
var init = function() {
var pins = $(“.pin”),
col = columns();
setWidth(); //设置包裹容器的宽度
for (var i = 0, pin; pin = pins[i]; i ) {
if (i