时间:2021-05-25
自pinterest网站爆红以来,国内一度掀起“仿PIN”狂潮,诸如花瓣、蘑菇街等等。正是如此,“瀑布流”式布局受到广大网民的青睐。众多知名JS库,也相继出现“瀑布流”布局插件,譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊,我也自己动手弄了段原生JS代码,实现了简单的“瀑布流”布局效果,当然肯定不能和以上那些优秀插件相提并论,有兴趣的朋友,可以去看看,希望能带给你或多或少的收获。
1. js代码:
<!DOCTYPE html><html><head> <meta charset="utf-"> <title>Waterfall代码</title></head><body><style type="text/css">.wf-main{ position: relative; margin: auto; width: px; overflow: hidden;}.wf-main .wf-cld{ position: absolute; margin-bottom: px; padding:px px; width: px; left: -px; top: -px; line-height:px; border: px solid #; border-radius: px; background-color: #ccc; overflow: hidden;}.wf-cld .inner{ position: absolute; left: -px; top: -px; margin-bottom: px; width: px; overflow: hidden; border: px solid #f; border-radius: px;}.wf-cld .title{ margin: px; padding: px; width: px; color: #f; font-size: px;}</style><div class="wf-main" id="wf-main"> <div class="wf-cld"><h style="color:#f">、瀑布流</h></div> <div class="wf-cld"><br></div> <div class="wf-cld"><br><br></div> <div class="wf-cld"><br><br><br></div> <div class="wf-cld"><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld" id="wf-inner"> <h class="inner title">、内部瀑布流</h> <div class="inner">-<br></div> <div class="inner">-</div> <div class="inner">-</div> <div class="inner">-</div> <div class="inner">-<br></div> <div class="inner">-</div> <div class="inner">-</div> <div class="inner">-</div> <div class="inner">-</div> </div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div></div><script type="text/javascript">function Waterfall(param){ this.id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container; this.colWidth = param.colWidth; this.colCount = param.colCount || ; this.cls = param.cls && param.cls != '' ? param.cls : 'wf-cld'; this.init();}Waterfall.prototype = { getByClass:function(cls,p){ var arr = [],reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)","g"); var nodes = p.getElementsByTagName("*"),len = nodes.length; for(var i = ; i < len; i++){ if(reg.test(nodes[i].className)){ arr.push(nodes[i]); reg.lastIndex = ; } } return arr; }, maxArr:function(arr){ var len = arr.length,temp = arr[]; for(var ii= ; ii < len; ii++){ if(temp < arr[ii]){ temp = arr[ii]; } } return temp; }, getMar:function(node){ var dis = ; if(node.currentStyle){ dis = parseInt(node.currentStyle.marginBottom); }else if(document.defaultView){ dis = parseInt(document.defaultView.getComputedStyle(node,null).marginBottom); } return dis; }, getMinCol:function(arr){ var ca = arr,cl = ca.length,temp = ca[],minc = ; for(var ci = ; ci < cl; ci++){ if(temp > ca[ci]){ temp = ca[ci]; minc = ci; } } return minc; }, init:function(){ var _this = this; var col = [],//列高 iArr = [];//索引 var nodes = _this.getByClass(_this.cls,_this.id),len = nodes.length; for(var i = ; i < _this.colCount; i++){ col[i] = ; } for(var i = ; i < len; i++){ nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]); iArr[i] = i; } for(var i = ; i < len; i++){ var ming = _this.getMinCol(col); nodes[i].style.left = ming * _this.colWidth + "px"; nodes[i].style.top = col[ming] + "px"; col[ming] += nodes[i].h; } _this.id.style.height = _this.maxArr(col) + "px"; }};new Waterfall({ "container":"wf-inner", "colWidth":, "colCount":, "cls":"inner"});new Waterfall({ "container":"wf-main", "colWidth":, "colCount":});</script></body></html>2. [图片] 瀑布流.jpg
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfallDemo:ht
本文实例为大家分享了JS实现瀑布流布局展示的具体代码,供大家参考,具体内容如下html部分瀑布流布局css部分*{padding:0px;margin:0px;
这是一款非常轻量级的纯原生JS的瀑布流插件——Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户。这款流布局JS插件仅有4KB的
本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下1.实现瀑布流布局思路准备好数据之后.绑定滚动事件.判断页面是否到底(滚动的距离+可是
本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下原理:1、瀑布流布局,要求进行布局的元素等宽,然后计算元素的宽与浏览器的宽度之比,得到