原生JS实现美图瀑布流布局赏析


Posted in Javascript onSeptember 07, 2015

自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   

原生JS实现美图瀑布流布局赏析

Javascript 相关文章推荐
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
JS高级运动实例分析
Dec 20 Javascript
Jqprint实现页面打印
Jan 06 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 #Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 #Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 #Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 #Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 #Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 #Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 #Javascript
You might like
小偷PHP+Html+缓存
2006/11/25 PHP
yii操作cookie实例简介
2014/07/09 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
python处理json数据中的中文
2014/03/06 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
小学教研工作制度
2014/01/15 职场文书
城市创卫标语
2014/06/17 职场文书
庆七一晚会主持词
2015/06/30 职场文书
2015大学迎新标语
2015/07/16 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
使用Redis做预定库存缓存功能
2022/04/02 Redis