Mobile plug-in waterfall stream plugin (native JS)

No preface, first on the DEMO(mobile phone to see better) and the original code .

Waterfall flow in the form of picture layout in mobile phones and other mobile devices widely used, the more common is the following the first two:

One, equal width equal height

This form is very easy to implement, so there's no more talking about it.

Second, equal width and unequal height

This form is more orthodox waterfall flow layout form, about how to achieve, please refer to a previous post--jquery waterfall flow detailed.

Three, equal height and unequal width

This form of waterfall flow has been exposed to previous work, and its main feature is that the two images of the same row are of equal height and width, and the aspect ratio is almost identical to the original (no stretching deformation). But not the height of the picture is not necessarily equal, the following describes how it is implemented.

Here first, a set of two pictures of the proportional algorithm.

First of all, still need two pictures of width or height or aspect ratio, such as one is Gaucambibi larger (thin) figure, and the other is Gaucambibi small (fat) figure.

If two pictures end up in the same row and have the same height, then the width of the image is inversely proportional to its aspect ratio. That is, the thin graph occupies a small width, and the fat figure occupies more width.

As an example:

Left side aspect ratio is 2:1 (2), right aspect ratio is 1:2 (0.5)

The sum of their aspect ratio is 2.5, then the width of the left figure is less than the portion (0.5/2.5), the width of the right image should be more than that part (2/2.5).

That is, the left image width should be one-fifth of the container, and the right image is four-fifths.

So the height is the width of the image multiplied by its aspect ratio, in order to respond to the use of pixels and the percentage, in order to maintain the height and width ratio, so do not use height, and padding-bottom squeeze out. The principle is described in the jquery waterfall flow.

Correct result:

Let's experiment with a practical example of this algorithm:

The size of the left image is 480*800, and the size of the right image is 500*311.

The main description of the algorithm, the code to express a general effect:

var rate1 = 800/480,    
    Rate2 = 311/500,    
    Totalrate = rate1 + rate2,    27.2    //72.8    height = width1 * RATE1;
return ' <div style= ' width: ' +width1+ '%; Padding-bottom: ' +height+ '% ' ></div> ' +
' <div style= ' width: ' +width2+ '%; Padding-bottom: ' +height+ '% ' ></div> ';

That is, the left image is 72.2%, and the right image occupies 72.8%. Height because of the same, only use one of the calculation is good. Look at the results:

Spending? No, we need two. There is a gap between the figure, if the gap is 2% of the width of the container

Width1 = rate2/totalrate * 98;  = rate1/totalrate * 98;

In this way, when you calculate the width ratio of the two graphs, we subtract the gap, and the gap generation can set the margin-right of the left image, or you can directly float the right image to the right.

Since the plugin is based on native JavaScript, we have to implement several functions in JQuery.

Selector Selector

Because the plug-in selector only works by selecting the container element, only one simple version is implemented.

function Selector (ele) {    if (!  Ele) {        return;    }     return Document.queryselector (ele);}

Extend function

The method is used to merge objects, and in the plug-in it is the main function of merging parameters, overriding the parameters passed in by the user.

functionExtend () {varargs =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(varOinchArgs[i]) { If (Args[i].hasownproperty (o)) obj[o] = Args[i][o];}}Else{obj= Args[0]; }}returnobj;}

var result =//  {color:blue}

Calling methods

1. Introduce wf.css and wf.js files.

2. Through the WaterFall constructor instantiation, a waterfall stream is generated through the Create method.

var New WaterFall ('. Content ', {    2,    ' Picurl '}); Waterfall.create (Dataarr);

Since the Create method actually adds DOM elements through appendchild, paging loads only needs to call the Create method again and pass in the new data.

3. Plugins support modular references such as AMD.

Parameters (param)

type--Waterfall Stream Type, default 1

1: Equal high width type, 2: Equal width type, 3: equal height type

The field of the picture address in Urlfield--json, which defaults to ' URL '. For example, the data you receive is called ' Picurl ', and passing in this value causes the object's property name to be mapped, as

field of width in Widthfield--json, default to ' width '

Heightfield--json field in height, default to ' height '

Ps:ti6 Sean Knife Tower Refueling, Little Red Book I will not buy:)

Mobile plug-in waterfall stream plugin (native JS)