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

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

 

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

一、等寬等高

這種形式實現起來非常容易，這里就不再多說。

 

二、等寬不等高

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

 

三、等高不等寬

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

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

首先，還是需要兩張圖片的寬和高或者高寬比，比如一張是高寬比比較大（瘦）的圖，另一張是高寬比比較小（胖）的圖。

如果兩張圖片最終需要並列在同一行，並且擁有相同的高度，那么圖片所占該行的寬度，就與其高寬比成反比。即瘦的圖占寬度小，胖的圖占寬度多。

舉個例子：

左圖高寬比為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 西恩刀塔加油，小紅本我就不買了：)