最近需要一个简单的瀑布流效果，所以网上找了一个，修改了部分代码
1、轻量代码，压缩2kb。
2、适用宽度自适应布局。瀑布流列由css控制。（先加入空列，获取宽度，删除空列，根据总宽计算列数。）
wall.js
"use strict";
(function ($) {
$.fn.jaliswall = function (options) {
this.each(function () {
var defaults = {
item: '.wall-item',
columnClass: '.wall-column',
resize: true
};
var prm = $.extend(defaults, options);
var container = $(this);
var items = container.find(prm.item);
var elemsDatas = [];
var columns = [];
var nbCols = getNbCols();
init();
function init() {
nbCols = getNbCols();
recordAndRemove();
print();
if (prm.resize) {
$(window).resize(function () {
if (nbCols != getNbCols()) {
nbCols = getNbCols();
setColPos();
print();
}
});
}
}
function getNbCols() {
var instanceForCompute = false;
if (container.find(prm.columnClass).length == 0) {
instanceForCompute = true;
container.append('<div class=\'' + parseSelector(prm.columnClass) + '\'></div>');
}
var colWidth = container.find(prm.columnClass).outerWidth(true);
var wallWidth = container.innerWidth();
if (instanceForCompute)
container.find(prm.columnClass).remove();
return Math.round(wallWidth / colWidth);
}
function recordAndRemove() {
items.each(function (index) {
var item = $(this);
elemsDatas.push({
content: item.html(),
classes: item.attr('class'),
href: item.attr('href'),
id: item.attr('id'),
colid: index % nbCols
});
item.remove();
});
}
function setColPos() {
for (var i in elemsDatas) {
elemsDatas[i].colid = i % nbCols;
}
}
function parseSelector(selector) {
return selector.slice(1, selector.length);
}
function print() {
var tree = '';
for (var i = 0; i < nbCols; i++) {
tree += '<div class=\'' + parseSelector(prm.columnClass) + '\'></div>';
}
container.html(tree);
for (var i in elemsDatas) {
var html = '';
var content = elemsDatas[i].content != undefined ? elemsDatas[i].content : '';
var href = elemsDatas[i].href != href ? elemsDatas[i].href : '';
var classe = elemsDatas[i].classes != undefined ? elemsDatas[i].classes : '';
var id = elemsDatas[i].id != undefined ? elemsDatas[i].id : '';
if (elemsDatas[i].href != undefined) {
html += '<a ' + getAttr(href, 'href') + ' ' + getAttr(classe, 'class') + ' ' + getAttr(id, 'id') + '>' + content + '</a>';
} else {
html += '<div ' + getAttr(classe, 'class') + ' ' + getAttr(id, 'id') + '>' + content + '</a>';
}
var tHeight = container.children(prm.columnClass).eq(0).height(),childIndex = 0;
for (var j = 0; j < nbCols; j++) {
if(container.children(prm.columnClass).eq(j).height() < tHeight){
tHeight = container.children(prm.columnClass).eq(j).height();
childIndex = j;
}
}
container.children(prm.columnClass).eq(childIndex).append(html);
}
}
function getAttr(attr, type) {
return attr != undefined ? type + '=\'' + attr + '\'' : '';
}
});
return this;
};
}(jQuery));
压缩后代码
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('"12 Z";(6($){$.X.Y=6(J){t.H(6(){2 P={8:\'.U-8\',7:\'.U-13\',w:u};2 4=$.11(P,J);2 5=$(t);2 F=5.s(4.8);2 3=[];2 10=[];2 d=l();K();6 K(){d=l();G();D();h(4.w){$(W).w(6(){h(d!=l()){d=l();V();D()}})}}6 l(){2 v=19;h(5.s(4.7).Q==0){v=u;5.L(\'<m c=\\\'\'+z(4.7)+\'\\\'></m>\')}2 N=5.s(4.7).1a(u);2 M=5.1c();h(v)5.s(4.7).T();r 1b.18(M/N)}6 G(){F.H(6(I){2 8=$(t);3.15({e:8.k(),c:8.f(\'c\'),b:8.f(\'b\'),9:8.f(\'9\'),S:I%d});8.T()})}6 V(){o(2 i R 3){3[i].S=i%d}}6 z(x){r x.14(1,x.Q)}6 D(){2 y=\'\';o(2 i=0;i<d;i++){y+=\'<m c=\\\'\'+z(4.7)+\'\\\'></m>\'}5.k(y);o(2 i R 3){2 k=\'\';2 e=3[i].e!=n?3[i].e:\'\';2 b=3[i].b!=b?3[i].b:\'\';2 E=3[i].c!=n?3[i].c:\'\';2 9=3[i].9!=n?3[i].9:\'\';h(3[i].b!=n){k+=\'<a \'+g(b,\'b\')+\' \'+g(E,\'c\')+\' \'+g(9,\'9\')+\'>\'+e+\'</a>\'}16{k+=\'<m \'+g(E,\'c\')+\' \'+g(9,\'9\')+\'>\'+e+\'</a>\'}2 A=5.q(4.7).p(0).B(),C=0;o(2 j=0;j<d;j++){h(5.q(4.7).p(j).B()<A){A=5.q(4.7).p(j).B();C=j}}5.q(4.7).p(C).L(k)}}6 g(f,O){r f!=n?O+\'=\\\'\'+f+\'\\\'\':\'\'}});r t}}(17));',62,75,'||var|elemsDatas|prm|container|function|columnClass|item|id||href|class|nbCols|content|attr|getAttr|if|||html|getNbCols|div|undefined|for|eq|children|return|find|this|true|instanceForCompute|resize|selector|tree|parseSelector|tHeight|height|childIndex|print|classe|items|recordAndRemove|each|index|options|init|append|wallWidth|colWidth|type|defaults|length|in|colid|remove|wall|setColPos|window|fn|jaliswall|strict|columns|extend|use|column|slice|push|else|jQuery|round|false|outerWidth|Math|innerWidth'.split('|'),0,{}))
页面以及样式。
index.html
<!DocType html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html,body{font-size:14px;line-height:1.5;min-height:100%;background:#f0f0f0;color:#505050;}
h3,p {margin:0;padding:0;}
h3 {font-size:1.2rem;}
ul,li{list-style:none;margin:0;padding:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
.textCenter {text-align:center;}
.mtp5 {margin-top:5px;}
.mtp10 {margin-top:10px;}
.header {font-weight:normal;font-size:2em;padding:1em 0;}
.wall {margin-left:auto;margin-right:auto;max-width:1000px;}
.article {text-align:center;
display: block;
margin: 0 0 12px 0;
padding: 12px;
background: white;
border-radius: 3px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
transition: all 220ms;
}
.article:hover {
box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
transition: all 220ms;
}
.article h2 {
text-align: center;
font-size: 14px;
text-transform: uppercase;
margin: 0 0 12px 0;
}
.wall {
display: block;
position: relative;
}
.wall-column {
display: block;
position: relative;
/*width: 33.333333%;*/
width: 25%;
float: left;
padding: 0 12px;
box-sizing: border-box;
}
@media (max-width: 640px) {
.wall-column {
width: 50%;
}
}
@media (max-width: 480px) {
.wall-column {
width: auto;
float: none;
}
}
.article dt {border-radius:5px;padding:8px 0;background:#4e81bd;border:2px solid #385c8b;color:#fff;}
.article dd {border-radius:5px;margin-top:10px;padding:5px 0;border:1px solid #4a7ebb;background: linear-gradient(to bottom, #e1ebff , #a6c5ff); }
</style>
</head>
<body>
<h2 class="header textCenter">信息系统</h2>
<div class="wall clearfix">
<div class="article">
<dl>
<dt>集团类</dt>
<dd>企业资源管理 SAP</dd>
<dd>商业智能 BI</dd>
<dd>员工助手 HLP</dd>
<dd>协同办公 OA</dd>
<dd>微信企业号</dd>
<dd>知识库 KM</dd>
<dd>文档加密</dd>
</dl>
</div>
<div class="article">
<dl>
<dt>营运营销类</dt>
<dd>门店收银 POS</dd>
<dd>门店销售 ERP</dd>
<dd>电子处方 EPS</dd>
<dd>会员管理 CRM</dd>
<dd>品类管理 JDA</dd>
<dd>营销共享平台 FSP</dd>
<dd>视频点检 MCP</dd>
</dl>
</div>
<div class="article">
<dl>
<dt>新零售类</dt>
<dd>微信公众号</dd>
<dd>微信小程序</dd>
<dd>O2O 饿了么<br>美团 京东到家</dd>
<dd>B2C电商 Hybris</dd>
<dd>门店一体机 PAD</dd>
<dd>呼叫中心 400</dd>
</dl>
</div>
<div class="article">
<dl>
<dt>供应链类</dt>
<dd>仓库管理 WMS</dd>
<dd>供应商管理 SRM</dd>
<dd>药品追溯平台 TCODE</dd>
<dd>运输管理 TMS</dd>
<dd>温湿度监控 WSD</dd>
</dl>
</div>
<div class="article">
<dl>
<dt>人资行政类</dt>
<dd>人资管理 HRM</dd>
<dd>档案管理 ERMS</dd>
<dd>企业内部管理 EM</dd>
<dd>考勤管理 KQ</dd>
</dl>
</div>
<div class="article">
<dl>
<dt>财务类</dt>
<dd>资金管理 BFS</dd>
</dl>
</div>
<div class="article">
<dl>
<dt>拓展类</dt>
<dd>房屋租赁</dd>
</dl>
</div>
<div class="article">
<dl>
<dt>拓展类</dt>
<dd>房屋租赁</dd>
</dl>
</div>
<div class="article">
<dl>
<dt>创新业务类</dt>
<dd>门诊管理 HIS</dd>
</dl>
</div>
</div>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="wall.js"></script>
<script type="text/javascript">
$('.wall').jaliswall({ item: '.article' });
</script>
</body>
</html>
最终效果
PC端
移动
其他。这里的其他宽度是480-640的宽度，可以根据实际调整。
