原生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 相关文章推荐
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
让table变成exls的示例代码
Mar 24 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
javascript实现前端成语点击验证优化
Jun 24 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
SMARTY学习手记
2007/01/04 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
Jquery ui css framework
2010/06/28 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
Python中extend和append的区别讲解
2019/01/24 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
python word转pdf代码实例
2019/08/16 Python
python实现拼图小游戏
2020/02/22 Python
市场营销管理制度
2014/01/29 职场文书
《识字五》教学反思
2014/03/01 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
《搭石》教学反思
2014/04/07 职场文书
博士生求职信
2014/07/06 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL