<div class="switch">
<button>关闭瀑布流</button>
</div>
<div class="waterfall-container">
<div class="box">
<div class="box-content">
<img src="http://cdn2.mhpbooks.com/2016/02/google.jpg">
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p>
</div>
</div>
<div class="box">
<div class="box-content">
<img src="https://www.google.com/landing/2step/images/why-need-img-2.png">
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p>
</div>
</div>
<div class="box">
<div class="box-content">
<img src="https://4.bp.blogspot.com/-Nyfdpymc_Lo/VkQw-nJ79mI/AAAAAAAARYg/6o9VeoTvu-I/s1600-r/logo_chrome.png"
>
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660"
>
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://i1.sinaimg.cn/IT/2013/0320/U5385P2DT20130320080117.jpg">
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.people.com.cn/mediafile/pic/20150906/81/15788599594280374761.jpg">
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.kuqin.com/upimg/topic/google.jpg">
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.xjp.cc/img.xjp.cc/2010/07/google-china.jpg">
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT6PwQ_Z2SO1lADWUw--QxVOFyHTr5JVRNuE89u5s99xoGerxK55A"
>
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://is4.mzstatic.com/image/thumb/Purple62/v4/c0/41/29/c04129a1-9b56-88b6-ae59-f424c6d9d343/source/512x512bb.jpg"
>
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://images.ifanr.cn/wp-content/uploads/2016/05/eric-schmidt.jpg">
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjr4L3m4efhuQK-6-DoNh4AmwIV4gIaVY0mb1SABPTTdi3SW60"
>
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://pad2.whstatic.com/images/thumb/f/f9/Delete-Google-Browsing-History-Step-4-Version-4.jpg/728px-Delete-Google-Browsing-History-Step-4-Version-4.jpg"
>
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="https://www.google.com.hk/intl/zh-CN/mobile/google-mobile-app/googlesuggest.jpg">
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://img.ithome.com/newsuploadfiles/2016/10/20161005_014140_718.png">
<p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.switch {
text-align: center;
}
.switch button {
height: 30px;
width: 100px;
}
.waterfall-container {
}
.box {
border: 1px dashed lightgray;
}
.box-content {
border: 1px dashed brown;
}
.box-content img {
width: 100%;
border: 1px solid black;
box-sizing: border-box;
}
.box-content p {
font-size: 14px;
box-sizing: border-box;
}
(function ($) {
//-----------------全局属性
//储存选项
var settings;
//窗口改变的setouttim方法
var st;
//-----------------暴露接口
var methods = {
init: function (options) {
settings = $.extend({
container: this, // 父容器
autoResize: true, // 当浏览器大小改变时是否自动调整
offsetWidth: 5, // 每个元素之间的宽度距离(不加单位默认px)
offsetHeight: 10, // 每个元素之间的高度距离(不加单位默认px)
itemWidth: 260, // 每个元素的宽度，瀑布流高度是不限制的，所以只要宽度固定就可以了
colNumber: 4, // 规定一行有几个元素，只有autoResize: false才生效
colNumberMin: 2, // 规定一行最小有几个元素
colNumberMax: 5, // 规定一行最大有几个元素
resizeDelay: 0 // 自动调整延迟时间，一般情况下不需要设置，默认的就好了
}, options);
//参数验证
if (typeof settings.autoResize !== 'boolean') {
settings.autoResize = true;
}
if (isNaN(settings.offsetWidth) || settings.offsetWidth < 0) {
settings.offsetWidth = 5;
}
if (isNaN(settings.offsetHeight) || settings.offsetHeight < 0) {
settings.offsetHeight = 10;
}
if (isNaN(settings.itemWidth) || settings.itemWidth < 0) {
settings.itemWidth = 10;
}
if (isNaN(settings.colNumber) || settings.colNumber < 0) {
settings.colNumber = 4;
}
if (isNaN(settings.colNumberMin) || settings.colNumberMin < 0) {
settings.colNumberMin = 2;
}
if (isNaN(settings.colNumberMax) || settings.colNumberMax < 0) {
settings.colNumberMax = 5;
}
if (isNaN(settings.resizeDelay) || settings.resizeDelay < 0) {
settings.resizeDelay = 50;
}
//窗口改变触发重新布局
if (settings.autoResize) {
$(window).on("resize", windowChangeAutoLayout);
}
//初始化布局
methods.layout();
return this;
},
destroy: function () {
return this.each(function () {
//绝对布局改为浮动
$(this).find('.box').css({"position": "", "top": "", left: "", float: "left"});
//解绑window的resize事件
$(window).off("resize", windowChangeAutoLayout);
});
},
layout: function () {
//判断页面能承载多少列
var colsNum = window.innerWidth / settings.itemWidth;
colsNum = Math.floor(colsNum);
if (!settings.autoResize) {//如果列数被用户固定
colsNum = settings.colNumber;
} else if (colsNum > settings.colNumberMax) {//如果超过最大列数
colsNum = settings.colNumberMax;
} else if (colsNum < settings.colNumberMin) {//如果低于最小列数
colsNum = settings.colNumberMin;
}
console.log("now cols-number:" + colsNum);
//设置contianer的宽度以便居中
settings.container.width(colsNum * settings.itemWidth);
//设置box的宽度
settings.container.find(".box").width(settings.itemWidth);
//设置item剩下元素的默认CSS
setCss();
//setCss需要时间
setTimeout(function () {
var elesHeight = [];//每个元素的高度
var colsHeight = new Array(colsNum); //每列元素现有的高度
//初始化colsHeight数组
for (var i = 0; i < colsHeight.length; ++i) {
colsHeight[i] = 0;
}
//给elesHeight赋值
settings.container.find(".box").each(function (index, item) {
var eleHeight = $(this).height();
elesHeight.push(eleHeight);
});
//依次摆放每一个item
settings.container.find(".box").each(function (index, item) {
//获得该元素应该在第几列(也就是高度最小的那一列)
var colShould = getMinHeightCol(colsHeight);
//给item绝对定位到恰当位置
var tempTop = colsHeight[colShould];
var tempLeft = colShould * settings.itemWidth;
$(this).css({position: "absolute", top: tempTop + "px", left: tempLeft + "px"});
//同时更新colsHeight数据
colsHeight[colShould] += $(this).outerHeight(true);
});
}, 50);
return this;
}
};
//-------------外部分发接口
$.fn.waterfall = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.waterfall');
}
};
//-------------内部功能函数
//当窗口改变的注册事件
function windowChangeAutoLayout() {
if (st) {
clearTimeout(st);
}
st = setTimeout(function () {
methods.layout();
}, settings.resizeDelay);
}
//得到n列中高度最小的那一列
function getMinHeightCol(arr) {
var minHeight = Math.min.apply(null, arr);
//console.log("最小高度:" + minHeight);
for (var i in arr) {
if (arr[i] == minHeight) {
return i;
}
}
//默认第一列
return 0;
}
//设置item的css
function setCss() {
if (!isNaN(settings.offsetWidth)) {
settings.offsetWidth = settings.offsetWidth + "px";
}
if (!isNaN(settings.offsetHeight)) {
settings.offsetHeight = settings.offsetHeight + "px";
}
settings.container.css({"position": "relative", "margin": "0 auto"});
settings.container.find(".box-content").css({
"text-align": "center",
"margin": settings.offsetHeight + " " + settings.offsetWidth,
"box-sizing": "border-box"
});
}
})(jQuery);
$(function () {
//初始化开启瀑布流布局
$(".waterfall-container").waterfall({
autoResize: true, // 当浏览器大小改变时是否自动调整
offsetWidth: 5, // 每个元素之间的宽度距离(不加单位默认px)
offsetHeight: 20, // 每个元素之间的高度距离(不加单位默认px)
itemWidth: 200, // 每个元素的宽度，瀑布流高度是不限制的，所以只要宽度固定就可以了
colNumber: 4, // 规定一行有几个元素，只有autoResize: false才生效
colNumberMin: 2, // 规定一行最小有几个元素
colNumberMax: 5, // 规定一行最大有几个元素
resizeDelay: 0 // 自动调整延迟时间，一般情况下不需要设置，默认的就好了
});
//开关控制开关瀑布流布局
$(".switch button").click(function () {
if ($(this).html() == "开启瀑布流") {
$(".waterfall-container").waterfall('init');
$(this).html("关闭瀑布流");
} else if ($(this).html() == "关闭瀑布流") {
$(".waterfall-container").waterfall('destroy');
$(this).html("开启瀑布流");
}
});
});