簡單的瀑布流
最近須要一個簡單的瀑布流效果，因此網上找了一個，修改了部分代碼javascript
一、輕量代碼，壓縮2kb。css
二、適用寬度自適應佈局。瀑布流列由css控制。（先加入空列，獲取寬度，刪除空列，根據總寬計算列數。）html
wall.jsjava
"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));
壓縮後代碼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,{}))
頁面以及樣式。web
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端微信
移動app
其餘。這裏的其餘寬度是480-640的寬度，能夠根據實際調整。
相關文章
- 1. 簡單瀑布流實現
- 2. 簡單瀑布流佈局實現
- 3. 瀑布流的簡單製做
- 4. 一個簡單的瀑布流實現。
- 5. 製做一個簡單的瀑布流
- 6. iOS簡單的瀑布流實現
- 7. iOS之簡單瀑布流的實現
- 8. 簡易瀑布流
- 9. 簡潔瀑布流
- 10. 簡單html、css實現瀑布流
- 更多相關文章...
- • Hibernate的運行流程 - Hibernate教程
- • RSS 發佈您的 Feed - RSS 教程
- • Github 簡明教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 簡單瀑布流實現
- 2. 簡單瀑布流佈局實現
- 3. 瀑布流的簡單製做
- 4. 一個簡單的瀑布流實現。
- 5. 製做一個簡單的瀑布流
- 6. iOS簡單的瀑布流實現
- 7. iOS之簡單瀑布流的實現
- 8. 簡易瀑布流
- 9. 簡潔瀑布流
- 10. 簡單html、css實現瀑布流