欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局

 更新時(shí)間:2015年04月02日 10:15:10   投稿:hebedich  
本文給大家分享的是使用原生的javascript實(shí)現(xiàn)的響應(yīng)式的瀑布流布局的方法和源碼,非常的實(shí)用,有需要的小伙伴可以參考下。

原生JS實(shí)現(xiàn)的瀑布流布局,代碼及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;
})()

以上所述就是本文給大家分享的全部?jī)?nèi)容了,希望能夠?qū)Υ蠹沂炀毷褂胘avascript有所幫助。

相關(guān)文章

  • JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法示例

    JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法示例

    這篇文章主要介紹了JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS數(shù)組遍歷、判斷、鍵值獲取等操作技巧,需要的朋友可以參考下
    2017-01-01
  • JavaScript實(shí)現(xiàn)職責(zé)鏈模式概述

    JavaScript實(shí)現(xiàn)職責(zé)鏈模式概述

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)職責(zé)鏈模式概述,詳細(xì)的介紹了什么是職責(zé)鏈模式和實(shí)現(xiàn)方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • namespace.js Javascript的命名空間庫(kù)

    namespace.js Javascript的命名空間庫(kù)

    命名空間的好處已經(jīng)耳熟能詳,但是JS中并沒有原生態(tài)支持命名空間,這個(gè)庫(kù)就是為js提供命名空間的功能。
    2011-10-10
  • 用javascript做一個(gè)小游戲平臺(tái) (二) 游戲選擇器

    用javascript做一個(gè)小游戲平臺(tái) (二) 游戲選擇器

    昨天晚上“設(shè)計(jì)”了n久,那些代碼都還沒有運(yùn)行起來,有點(diǎn)心急、有點(diǎn)郁悶。
    2010-01-01
  • 關(guān)于微信小程序自定義tabbar問題詳析

    關(guān)于微信小程序自定義tabbar問題詳析

    微信小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于微信小程序自定義tabbar問題的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • 微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實(shí)現(xiàn)步驟

    微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實(shí)現(xiàn)步驟

    實(shí)際開發(fā)中很多時(shí)候我們需要通過上個(gè)頁面?zhèn)鬟^來的值動(dòng)態(tài)的更改標(biāo)題欄文字,下面這篇文章主要給大家介紹了關(guān)于微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實(shí)現(xiàn)步驟,需要的朋友可以參考下
    2023-02-02
  • js創(chuàng)建數(shù)組的簡(jiǎn)單方法

    js創(chuàng)建數(shù)組的簡(jiǎn)單方法

    下面小編就為大家?guī)硪黄狫S創(chuàng)建數(shù)組的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-07-07
  • 如何利用JavaScript?實(shí)現(xiàn)繼承

    如何利用JavaScript?實(shí)現(xiàn)繼承

    這篇文章主要介紹了如何利用JavaScript?實(shí)現(xiàn)繼承,JavaScript?在編程語言界是個(gè)特殊種類,它和其他編程語言很不一樣,JavaScript可以在運(yùn)行的時(shí)候動(dòng)態(tài)地改變某個(gè)變量的類型,下面小編將繼續(xù)介紹JavaScript如何實(shí)現(xiàn)繼承,需要的朋友可以參考下
    2022-02-02
  • Bootstrap CSS布局之表格

    Bootstrap CSS布局之表格

    這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS布局之表格的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • JavaScript入門基礎(chǔ)

    JavaScript入門基礎(chǔ)

    在學(xué)習(xí)JavaScript之前,必須具備HTML和CSS知識(shí),Javascript是一種解釋性的,基于對(duì)象的腳本語言(aninterpreted,object-basedscriptinglanguage)。這篇文章主要講解JavaScript入門基礎(chǔ),需要的朋友可以參考下
    2015-08-08

最新評(píng)論