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

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

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

演示图：

核心代码：

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有所帮助。

您可能感兴趣的文章:

• js实现瀑布流的三种方式比较
• 原生js实现移动端瀑布流式代码示例
• js实现瀑布流的一种简单方法实例分享
• 解析瀑布流布局:JS+绝对定位的实现
• 纯js实现瀑布流展现照片(自动适应窗口大小)
• javascript自适应宽度的瀑布流实现思路
• js实现的美女瀑布流效果代码
• 纯js实现瀑布流布局及ajax动态新增数据
• javascript瀑布流式图片懒加载实例
• JS原生瀑布流效果实现