原生JS实现响应式瀑布流布局


Posted in Javascript onApril 02, 2015

原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall

Demo:http://leozdgao.github.io/demo/responsive_waterfall/

演示图:

原生JS实现响应式瀑布流布局

核心代码:

responsive_waterfall.js

(function() {
  var Waterfall = function(opts) {
    var minBoxWidth;
    Object.defineProperty(this, 'minBoxWidth', {
      get: function() { return minBoxWidth; },
      set: function(value) {
        if(value < 100) value = 100;
        if(value > 1000) value = 1000;
         
        minBoxWidth = value;
      }
    });
 
    opts = opts || {};
    var containerSelector = opts.containerSelector || '.wf-container';
    var boxSelector = opts.boxSelector || '.wf-box';
 
    // init properties
    this.minBoxWidth = opts.minBoxWidth || 250;
    this.columns = [];
    this.container = document.querySelector(containerSelector);
    this.boxes = this.container ? 
      Array.prototype.slice.call(this.container.querySelectorAll(boxSelector)) : [];
 
    // compose once in constructor
    this.compose();
 
    // handle the image or something which might change size after loaded
    var images = this.container.querySelectorAll('img'), that = this;
    var clr;
    for (var i = 0; i < images.length; i++) {
      var img = images[i];
      img.onload = function() {
        if(clr) clearTimeout(clr);
 
        clr = setTimeout(function() {
          that.compose(true);
        }, 500);
      }
    }
 
    window.addEventListener('resize', function() {
      that.compose();
    });
  }
 
  // compute the number of columns under current setting
  Waterfall.prototype.computeNumberOfColumns = function() {
    var num = Math.floor(this.container.clientWidth / this.minBoxWidth);
    num = num || 1; // at least one column
 
    return num;
  }
 
  // init enough columns and set the width
  Waterfall.prototype.initColumns = function(num) {
    if(num > 0) {
      // create column div
      this.columns = [];
      var width = (100 / num) + '%';
      while(num--) {
        var column = document.createElement('div');
        column.className = 'wf-column';
        column.style.width = width;
        this.columns.push(column);
        this.container.appendChild(column);
      }
    }
  }
 
  // get the index of shortest column
  Waterfall.prototype.getMinHeightIndex = function() {
    if(this.columns && this.columns.length > 0) {
      var min = this.columns[0].clientHeight, index = 0;
      for (var i = 1; i < this.columns.length; i++) {
        var columnElem = this.columns[i];
        if(columnElem.clientHeight < min) {
          min = columnElem.clientHeight;
          index = i;
        }
      }
      return index;
    }
    else return -1;
  }
 
  // compose core
  Waterfall.prototype.compose = function(force) {
    var num = this.computeNumberOfColumns();
    var cols = this.columns.length;
     
    if(force || num != cols) {
      // remove old column
      for (var i = 0; i < this.columns.length; i++) {
        var columnElem = this.columns[i];
        columnElem.remove();
      }
 
      // init new column
      this.initColumns(num);
 
      // compose
      for (var i = 0, l = this.boxes.length; i < l; i++) {
        var box = this.boxes[i];
        this.addBox(box);
      }
    }
  }
 
  // add a new box to grid
  Waterfall.prototype.addBox = function(elem) {
    // push if new box
    if(this.boxes.indexOf(elem) < 0) this.boxes.push(elem);
 
    var columnIndex = this.getMinHeightIndex();
    if(columnIndex > -1) {
      var column = this.columns[columnIndex];
      column.appendChild(elem);
    }
  }
 
  window.Waterfall = Waterfall;
})()

以上所述就是本文给大家分享的全部内容了,希望能够对大家熟练使用javascript有所帮助。

Javascript 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
js实现加载更多功能实例
Oct 27 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 #Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 #Javascript
JavaScript中操作Mysql数据库实例
Apr 02 #Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 #Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 #Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 #Javascript
jquery实现的省市区三级联动
Apr 02 #Javascript
You might like
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
浅谈js中的bind
2019/03/18 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
在python中只选取列表中某一纵列的方法
2018/11/28 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
服装行业创业计划书范文
2014/02/05 职场文书
创新型城市实施方案
2014/03/06 职场文书
廉洁自律承诺书
2014/03/27 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
律师函格式范本
2015/05/27 职场文书