原生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下申明对象的几种方法小结
Oct 02 Javascript
js常用排序实现代码
Dec 28 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
javascript 闭包详解
Feb 15 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 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入库和出库
2013/06/25 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
学习ExtJS Column布局
2009/10/08 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python 自定义异常和异常捕捉的方法
2018/10/18 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python实现AdaBoost算法的示例
2020/10/03 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
nohup的用法
2014/08/10 面试题
行政监察建议书
2014/05/19 职场文书
法人授权委托书
2014/09/16 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python