最近需要一个简单的瀑布流效果，所以网上找了一个，修改了部分代码
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的宽度，可以根据实际调整。
原文地址：https://www.cnblogs.com/vmumu/p/9964025.html
时间： 2024-10-01 06:42:36