簡單的瀑布流
阿新 • • 發佈：2018-11-15
ctype reg 門店銷售 pla rms .html child wal tran
最近需要一個簡單的瀑布流效果，所以網上找了一個，修改了部分代碼
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(), class: 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].class != undefined ? elemsDatas[i].class : ‘‘; 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){ 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;}(‘"Z 13";(4($){$.Y.X=4(D){p.E(4(){2 S={b:\‘.G-b\‘,8:\‘.G-10\‘,s:y};2 5=$.11(S,D);2 6=$(p);2 H=6.q(5.b);2 3=[];2 12=[];2 c=m();J();4 J(){c=m();K();u();e(5.s){$(W).s(4(){e(c!=m()){c=m();M();u()}})}}4 m(){2 w=19;e(6.q(5.8).O==0){w=y;6.U(\‘<l d=\\\‘\‘+t(5.8)+\‘\\\‘></l>\‘)}2 L=6.q(5.8).1a(y);2 I=6.1c();e(w)6.q(5.8).F();o 1b.18(I/L)}4 K(){H.E(4(Q){2 b=$(p);3.15({f:b.h(),d:b.g(\‘d\‘),7:b.g(\‘7\‘),9:b.g(\‘9\‘),T:Q%c});b.F()})}4 M(){r(2 i R 3){3[i].T=i%c}}4 t(v){o v.14(1,v.O)}4 u(){2 x=\‘\‘;r(2 i=0;i<c;i++){x+=\‘<l d=\\\‘\‘+t(5.8)+\‘\\\‘></l>\‘}6.h(x);r(2 i R 3){2 h=\‘\‘;2 f=3[i].f!=n?3[i].f:\‘\‘;2 7=3[i].7!=7?3[i].7:\‘\‘;2 C=3[i].d!=n?3[i].d:\‘\‘;2 9=3[i].9!=n?3[i].9:\‘\‘;e(3[i].7!=n){h+=\‘<a \‘+k(7,\‘7\‘)+\‘ \‘+k(C,\‘d\‘)+\‘ \‘+k(9,\‘9\‘)+\‘>\‘+f+\‘</a>\‘}16{h+=\‘<l \‘+k(C,\‘d\‘)+\‘ \‘+k(9,\‘9\‘)+\‘>\‘+f+\‘</a>\‘}2 N=6.z(5.8).A(0).P(),B=0;r(2 j=0;j<c;j++){e(6.z(5.8).A(j).P()<N){B=j}}6.z(5.8).A(B).U(h)}}4 k(g,V){o g!=n?V+\‘=\\\‘\‘+g+\‘\\\‘\‘:\‘\‘}});o p}}(17));‘,62,75,‘||var|elemsDatas|function|prm|container|href|columnClass|id||item|nbCols|class|if|content|attr|html|||getAttr|div|getNbCols|undefined|return|this|find|for|resize|parseSelector|print|selector|instanceForCompute|tree|true|children|eq|childIndex|classe|options|each|remove|wall|items|wallWidth|init|recordAndRemove|colWidth|setColPos|tHeight|length|height|index|in|defaults|colid|append|type|window|jaliswall|fn|use|column|extend|columns|strict|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的寬度，可以根據實際調整。
簡單的瀑布流