首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生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实现美图瀑布流布局赏析

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

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
JavaScript 函数的执行过程
May 09 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
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
443(1) 前后端分离(1) 二级域名(1) 反向代理(2) 生成缩略图(1) shell(3) 防盗链(1) 默认端口(3) reload(1) 压力测试(1)
You might like
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python re模块介绍
2014/11/30 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python for循环中的陷阱详解
2018/07/13 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python简单验证码识别的实现方法
2019/05/10 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
大学生入党自荐书
2015/03/05 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
git stash(储藏)的用法总结
2022/06/25 Servers