移動端三合一瀑布流插件（原生JS）

沒有前言，先上DEMO（手機上看效果更佳）和 原碼。

 

瀑布流形式的圖片佈局方式在手機等移動端設備上運用普遍，比較常見的是下面前兩種：

1、等寬等高

這種形式實現起來很是容易，這裏就再也不多說。

 

2、等寬不等高

這種形式算是比較正統的瀑布流佈局形式，關於如何實現的請參考以前的一篇博文——jQuery瀑布流詳解。

 

3、等高不等寬

在以前的工做中接觸到了這種形式的瀑布流，它的主要特色是：同一行的兩張圖片高度相等，寬度不等，且寬高比與原圖近乎一致（沒有拉伸變形）。可是不一樣行的圖片高度不必定相等，下面就介紹下它的實現方式。

這裏先說一組中兩張圖片的比例算法。

首先，仍是須要兩張圖片的寬和高或者高寬比，好比一張是高寬比比較大（瘦）的圖，另外一張是高寬比比較小（胖）的圖。

若是兩張圖片最終須要並列在同一行，而且擁有相同的高度，那麼圖片所佔該行的寬度，就與其高寬比成反比。即瘦的圖佔寬度小，胖的圖佔寬度多。

舉個例子：

左圖高寬比爲2:1 (2)，右圖高寬比爲1:2 (0.5)

他們的高寬比之和爲2.5，那麼左圖的寬度比應該是較少的那部分 (0.5 / 2.5)，右圖的寬度比應該是較多的那部分 (2 / 2.5)。

也就是左圖寬應爲容器的五分之一，右圖爲五分之四。

那麼高度就是圖片的寬度乘以其高寬比，爲了響應式這裏都不使用像素而使用百分比，爲了使高度與寬度保持比例，因此不使用 height，而用 padding-bottom 擠出來。原理見jQuery瀑布流詳解。

正確結果：

下面咱們經過一個實際的例子來試驗下這個算法：

左圖的尺寸爲 480*800，右圖的尺寸爲 500*311。

主要闡述下算法，代碼表達個大意：

var rate1 = 800 / 480,    
    rate2 = 311 / 500,    
    totalRate = rate1 + rate2,
    width1 = rate2 / totalRate * 100, // 27.2
    width2 = rate1 / totalRate * 100, // 72.8
    height = width1 * rate1;

return '<div style="width: '+width1+'%; padding-bottom: '+height+'%"></div>'+
　　　　'<div style="width: '+width2+'%; padding-bottom: '+height+'%"></div>';

即左圖佔72.2%，右圖佔72.8%。高度由於一致，只用計算其中一個就好。看下結果：

破費？還沒，咱們須要兩張圖之間有個間隙，假如這個間隙爲容器寬度的2%

width1 = rate2 / totalRate * 98;
width2 = rate1 / totalRate * 98;

這樣在計算兩張圖所佔寬度比的時候就會先減去間隙，間隙的生成能夠設置左圖的 margin-right，也能夠直接將右圖向右浮動。

 

因爲該插件是基於原生 JavaScript，因此咱們得實現幾個 jQuery 中的函數。

選擇器

由於該插件的選擇器惟一做用就是選中容器元素，因此只實現一個簡易版的便可。

function selector(ele) {
    if (!ele) {
        return;
    }
    return document.querySelector(ele);
}

extend函數

該方法是用來合併對象的，在插件中它的主要做用是合併參數，將使用者傳入的參數覆蓋默認參數。

function extend() {
　　var args = Array.prototype.slice.call(arguments),
　　　　 len = args.length,
　　　　 obj = null, i;

　　for (i = 0; i < len; i ++) {
　　　　if (typeof(args[i]) !== 'object') {
　　　　　　break;
　　　　}
　　　　if (i !== 0) {
　　　　　　for (var o in args[i]) {
　　　　　　　　if (args[i].hasOwnProperty(o)) obj[o] = args[i][o];
　　　　　　}
　　　　} else {
　　　　　　obj = args[0];
　　　　}
　　}

　　return obj;
}

var result = extend({color: red}, {color: blue});
console.log(result); // {color: blue}

 

調用方法

1. 引入 wf.css 和 wf.js 文件。

2. 經過 WaterFall 構造函數實例化，經過 create 方法生成瀑布流。

var waterFall = new WaterFall('.content', {
    type: 2,
    urlField: 'picUrl'
});
waterFall.create(dataArr);

因爲 create 方法實際是經過 appendChild 來添加DOM元素的，因此分頁加載時只須要再次調用create方法並傳入新的數據便可。

3. 插件支持AMD等模塊化引用。

 

參數 (param)

type —— 瀑布流類型，默認1

1：等高等寬型，2：等寬型，3：等高型

urlField —— json中圖片地址的字段，默認爲 'url'。好比你接收到的數據中字段叫 'picUrl', 傳入該值會使對象的屬性名進行映射，下同

widthField —— json中寬度的字段，默認爲 'width'

HeightField —— json中高度的字段，默認爲 'height'

 

PS：TI6 西恩刀塔加油，小紅本我就不買了：)