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

詳解javascript實現(xiàn)瀑布流絕對式布局

 更新時間:2016年01月29日 15:22:30   投稿:lijiao  
這篇文章主要介紹了javascript實現(xiàn)瀑布流的兩種布局方式,一是絕對式布局、二是列式布局,詳細介紹了這兩種布局方式的原理,感興趣的小伙伴們可以參考一下

瀑布流也應(yīng)該算是流行幾年了吧。首先是由Pinterest掀起的浪潮,然后國內(nèi)設(shè)計如雨后春筍般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不過最近涉黃,好像被喝茶了),還有淘寶的 “哇哦”. 這些都是很棒的例子, 今天我們就聊一聊瀑布流。
一、絕對式布局:

JS實現(xiàn)原理

其實瀑布式主要的難點就在于,如果將圖片整齊的排列在對應(yīng)的列下,以及什么時候開始刷新加載圖片。
而圖片整齊的排列的主要邏輯和算法即,先獲取容器內(nèi)可以放多少列,然后,通過計算,存放第一列的高度,再遍歷剩下(除第一列的元素)的高度,分別放入,高度最小的那一列。 逐個添加,最后結(jié)束遍歷。
開始刷新的設(shè)置就很簡單了,瀑布流刷新只和一個事件有關(guān),即,window.onscroll. 主要的算法即,當頁面滑動到最低高度的時候開始加載節(jié)點并且添加,當然,節(jié)點添加的個數(shù)是不固定的。
先上代碼吧,我這里分3部分講解,一個是圖片的排列,一個是設(shè)置加載的位置.另外再補充一個響應(yīng)式加載。

1、圖片排列

var $ = function() {
  return document.querySelectorAll.apply(document, arguments);
 }
 var arrHeight = []; //得到分列的高度
 var columns = function() { //計算頁面最多可以放多少列
  var containerW = $("#main")[0].clientWidth,
   pinW = $(".pin")[0].offsetWidth;
  return Math.floor(containerW / pinW);
 }
 var getIndex = function(arr) { //獲得最小高度的index
   var minHeight = Math.min.apply(null, arr); //獲得最小高度
   for (var i in arr) {
    if (arr[i] === minHeight) {
     return i;
    }
   }
  }
  //根據(jù)列數(shù)確定第一排img的高度并放入數(shù)組當中。
 var setCenter = (function() { //通過列數(shù)設(shè)置寬度
  var main = $('#main')[0]; //獲得罩層
  var getPadding = function() { //設(shè)置padding
   var col = columns(); //獲得最后一列
   var padding = main.clientWidth - col * $('.pin')[0].offsetWidth;
   return padding / 2;
  }
  var getComputedStyle = function(ele) { //兼容IE的支持情況
   if (window.getComputedStyle) {
    return window.getComputedStyle(ele);
   } else {
    return ele.currentStyle;
   }
  }
  var getPinPad = function() { //獲得pin的padding值
   var pin = $(".pin")[0];
   return parseInt(getComputedStyle(pin).paddingLeft);
  }
  return function() { //設(shè)置寬度
   main.style.padding = `0 ${getPadding()}px 0 ${getPadding()-getPinPad()}px`;
  }
 })();
 var overLoad = function(ele) {
  var index = getIndex(arrHeight),
   minHeight = Math.min.apply(null, arrHeight), //獲取最小高度
   pins = $('.pin'),
   style = ele.style;
  style.position = "absolute";
  style.top = minHeight + "px"; //設(shè)置當前元素的高度
  style.left = pins[index].offsetLeft + "px";
  arrHeight[index] += ele.offsetHeight;
 }
 //初始化時執(zhí)行函數(shù)
 var init = function() {
   var pins = $(".pin"),
    col = columns();
   setCenter(); //設(shè)置包裹容器的寬度
   for (var i = 0, pin; pin = pins[i]; i++) {
    if (i < col) { //存儲第一排的高度
     arrHeight.push(pin.offsetHeight);
    } else {
     overLoad(pin); //將元素的位置重排
    }
   }
  }

里面一共有7個函數(shù)(大函數(shù)),一個變量。 說一下思路吧。 首先,頁面onload之后 執(zhí)行的函數(shù)是 init. 要知道,一個js程序一定有他的入口,關(guān)鍵看你怎么找了。 然后我們深入init函數(shù)體,觀察。init里面執(zhí)行的業(yè)務(wù)邏輯就是 存儲第一排元素的高度,然后重排剩下的元素。 通過columns函數(shù)來獲得當前窗口最多可以放下多少列,然后設(shè)置容器的居中(通過padding設(shè)置即可). 接下來,遍歷pin的單元框,將第一排的元素高度存放在arrHeight數(shù)組里,將剩下的元素進行重排。 其他的函數(shù)覺得沒什么講解的必要了。 我們著重來看一下overLoad函數(shù).
2、overLoad

var overLoad = function(ele) {
  var index = getIndex(arrHeight),
   minHeight = Math.min.apply(null, arrHeight), //獲取最小高度
   pins = $('.pin'),
   style = ele.style;
  style.position = "absolute";
  style.top = minHeight + "px"; //設(shè)置當前元素的高度
  style.left = pins[index].offsetLeft + "px";
  arrHeight[index] += ele.offsetHeight;
 }

在overLoad里面有g(shù)etIndex函數(shù),獲取最小高度的index,然后就可以設(shè)置傳入進來的ele元素的位置(絕對定位), top為數(shù)組中最小高度的px值,left就為第一排制定的Index元素的左邊距位置。 最后更新一下高度,ok!!! that's enough.
3、設(shè)置加載位置

var dataInt = [{
  'src': '1.jpg'
 }, {
  'src': '2.jpg'
 }, {
  'src': '3.jpg'
 }, {
  'src': '4.jpg'
 }, {
  'src': '1.jpg'
 }, {
  'src': '2.jpg'
 }, {
  'src': '3.jpg'
 }, {
  'src': '4.jpg'
 }];

 function isLoad() { //是否可以進行加載
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
   wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
   point = scrollTop + wholeHeight; //頁面底部距離header的距離
  var arr = $('.pin');
  var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
  return (lastHei < point) ? true : false;
 }
 //處理滑動
 var dealScroll = (function() {
  var main = $('#main')[0],
   flag = true;
  return function() {
   if (isLoad() && flag) {
    for (var i = 0, data; data = dataInt[i++];) {
     var div = document.createElement('div');
     div.innerHTML = temp(data.src);
     div.className = "pin";
     main.appendChild(div);
     overLoad(div); //和上面的overload有耦合性質(zhì)
    }
    flag = false;
    setTimeout(function() { //控制滑行手速,時間越長對速度的滑動時間影響越大。
     flag = true;
    }, 200);
   }
  }
 })();

 function temp(src) {
  return `
  <div class="box">
   <img src="http://cued.xunlei.com/demos/publ/img/P_00${src}"/>
  </div>
 `;
 }

其實,精華就在上一部分,這個只是作為一個加載數(shù)據(jù)的手段,當然,你可以點擊加載(手動觸發(fā)),或者其他的加載方法。 當然,怎么設(shè)置完全是取決于你的。 所以,隨大流,依然是通過下滑滾動加載。 繼續(xù),找入口函數(shù)->dealScroll. 該函數(shù)執(zhí)行的任務(wù)就是,通過isload函數(shù),判斷是否可以進行加載判斷。 我們看一下isload函數(shù),這個就是滾動加載的關(guān)鍵點.

 function isLoad() { //是否可以進行加載
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
   wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
   point = scrollTop + wholeHeight; //頁面底部距離header的距離
  var arr = $('.pin');
  var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
  return (lastHei < point) ? true : false;
 }

通過計算得出,頁面底部距視口的位置(工具條下部) 與 最后一個元素的絕對位置比較,如果 滑動距離超過,則啟用加載。
yeah~ That's over.
back to dealScroll
接下來就是看加載的部分了,這個部分其實也沒什么說的,就是創(chuàng)建一個div節(jié)點,然后將他放到容器的最后,并且通過overLoad函數(shù)來處理該節(jié)點的位置。 另外在該函數(shù)的末尾,我設(shè)置了一個控制滑動速度的trick,通過對函數(shù)的節(jié)流,防止有時候,請求過慢,用戶重復(fù)發(fā)送請求,造成資源浪費。
然后,這一部分也可以告一段落了。
4、響應(yīng)式
最后一部分就是響應(yīng)式了, 這部分,也超級簡單,只要你封裝性做的好,其實這一部分就是添加一個resize事件就over了。我們繼續(xù)找入口函數(shù)。

 var resize = (function() {
   var flag;
   return function(fn) {
    clearTimeout(flag);
    flag = setTimeout(function() { //函數(shù)的節(jié)流,防止用戶過度移動
     fn();
     console.log("ok")
    }, 500);
   }
})();

同樣,這里使用到了函數(shù)節(jié)流的思想,要知道,作為一個程序員,永遠不要以為 用戶 干不出什么 傻事. 比如,沒事的時候拖著瀏覽器窗口玩,放大,縮小,再放大... 其實,這事我經(jīng)常干,因為沒有女朋友,寫代碼寫累了,就拖瀏覽器玩。 所以,考慮到我們單身狗的需求,使用函數(shù)節(jié)流是非常有必要的。 感興趣的童鞋,可以參考我前面的文章,進行學習。 說明一下,這里的回調(diào)函數(shù)指的就是init函數(shù),但是 需要對init做些改動。詳見。

 var update = function(ele) { //當resize的時候,重新設(shè)置
  ele.style.position = "initial";
 }
 //初始化時執(zhí)行函數(shù)
 var init = function() {
   var pins = $(".pin"),
    col = columns();
   arrHeight = []; //清空高度
   setCenter(); //設(shè)置包裹容器的寬度
   for (var i = 0, pin; pin = pins[i]; i++) {
    if (i < col) { //存儲第一排的高度
     arrHeight.push(pin.offsetHeight);
     update(pin);
    } else {
     overLoad(pin); //將元素的位置重排
    }
   }
  }

上面需要加入update,對新的第一排元素進行更新。
然后就可以直接搬過來使用即可。
這就是絕對是布局的大部分內(nèi)容了,關(guān)于javascript瀑布流另一種布局方式請參考下一篇文章《詳解javascript實現(xiàn)瀑布流列式布局》。

相關(guān)文章

  • 數(shù)組方法解決JS字符串連接性能問題有爭議

    數(shù)組方法解決JS字符串連接性能問題有爭議

    大多數(shù)情況下,加法運算符是首選;如果用戶主要使用IE6或7,并且字符串大小較大或數(shù)量較多時,那么數(shù)組技術(shù)就很值得。
    2011-01-01
  • 原生javascript實現(xiàn)Tab選項卡切換功能

    原生javascript實現(xiàn)Tab選項卡切換功能

    本文主要介紹了使用原生javascript實現(xiàn)Tab選項卡切換的功能,雖然jQuery有很多類似的插件,單jQuery庫著實有點龐大,這種小功能還是直接用javascript來做就好了。
    2015-01-01
  • 微信小程序?qū)崿F(xiàn)點擊效果

    微信小程序?qū)崿F(xiàn)點擊效果

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點擊效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-06-06
  • url地址自動加#號問題說明

    url地址自動加#號問題說明

    # 包含了一個位置信息,默認的錨點是#top 也就是網(wǎng)頁的上端,而javascript:void(0) 僅表示一個死鏈接。
    2010-08-08
  • 使用impress.js制作幻燈片

    使用impress.js制作幻燈片

    impress.js是一款新興的幻燈工具,它的效果類似Prezi,但是擁有3D的功能,而且是在MIT&GPL協(xié)議下開源,對于有一定的Web開發(fā)基礎(chǔ)的人而言,真是一個福音,只需要簡單的用些html指令,并加載impress.js就可以制作出一個縮放式幻燈,朋友們感興趣吧,快來一起學習吧。
    2015-09-09
  • ES6的Fetch異步請求的實現(xiàn)方法

    ES6的Fetch異步請求的實現(xiàn)方法

    這篇文章主要介紹了ES6的Fetch異步請求的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • ES6新特性之變量和字符串用法示例

    ES6新特性之變量和字符串用法示例

    這篇文章主要介紹了ES6新特性之變量和字符串用法,結(jié)合具體實例形式分析了ES6中變量與字符串的特性、使用方法與相關(guān)注意事項,需要的朋友可以參考下
    2017-04-04
  • 全面解讀TypeScript和JavaScript的區(qū)別

    全面解讀TypeScript和JavaScript的區(qū)別

    TypeScript和JavaScript是目前項目開發(fā)中較為流行的兩種腳本語言, TypeScript是JavaScript的一個超集,JavaScript是一種輕量級的解釋性腳本語言,本文主要介紹了兩者區(qū)別,感興趣的可以了解一下
    2023-09-09
  • 小程序?qū)崿F(xiàn)購物車完整版

    小程序?qū)崿F(xiàn)購物車完整版

    這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)購物車完整版,實現(xiàn)加減計算數(shù)量跟金額,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-07-07
  • javascript跑馬燈抽獎實例講解

    javascript跑馬燈抽獎實例講解

    這篇文章主要為大家介紹了javascript跑馬燈抽獎特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-01-01

最新評論