移动端三合一瀑布流插件（原生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 西恩刀塔加油，小红本我就不买了：)