原生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 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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
Protoss热键控制
2020/03/14 星际争霸
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vue实现计算器功能
2020/02/22 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
python thread 并发且顺序运行示例
2009/04/09 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
Python如何实现线程间通信
2020/07/30 Python
联想德国官网:Lenovo Germany
2018/07/04 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
高中教师评语大全
2014/04/25 职场文书
博士生求职信
2014/07/06 职场文书
保研推荐信格式
2015/03/25 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript