Implement waterfall flow Map Library layout in JQuery Mobile

First look at the effect shown in the 1080P display of the Windows system:

There are few existing examples of this integration, and it is the method that is summed up in this way, which is recorded here.

First visit masonry official website download masonry.pkgd.min.js: http://masonry.desandro.com/

Integrate it into your project and introduce it in the page.

Initialize the ID variable so that the page ID is different each time it is loaded, to avoid the error of the ID repetition caused by Ajax loading.

var " gallerycontent " + guid.newguid ();

Initialize with HTML initialization:

<id= "@id"  style= "margin:50px auto;" class = "Js-masonry" data-masonry-options  "Isfitwidth": True, "Itemselector": ". Post"} '> ..... </ Div >

The above is the external container code. The id attribute uses the preceding variable, and the Style property, together with the following Isfitwidth option, implements the automatic horizontal centering of the container; I didn't specify the column width option like the masonry introductory tutorial, and I thought it didn't work for my project. With CSS box model, the width and spacing of the image block can be controlled well.

Pseudo-code for internal image chunks:

<Divclass= "POST"style= "height:@ (260/1.0/image1. Width *image1. Height) px">         <aData-ajax= "true"href= "@image1. Large Map Address">                    <imgsrc= "@image1. Small map Address"width= "260" />         </a></Div><Divclass= "POST"style= "height:@ (260/1.0/image2. Width *image2. Height) px">         <aData-ajax= "true"href= "@image2. Large Map Address">                    <imgsrc= "@image2. Small map Address"width= "260" />         </a></Div>............

Class corresponds to the Itemselector option in the initialization option; The source image size is irregular, the width of the IMG is forced to set to 260, so that the height of the image will be automatically equal to the change; after I test, want to normal display must explicitly set the height of each block, because almost do not do front-end development, For normal page I really do not know how to get the size of the source image, fortunately, the size of the image in my project is recorded in the database when uploading, just get its size and simple scaling operation, and write to the Style property.

The definition of the post class in the CSS file:

{    margin: 10px;     padding: 5px;     Border: solid;     border-width: 2px;     border-color: #e4e4e4;     -webkit-border-radius:5px;     -moz-border-radius:5px;}  {    border: 0;}

The main control of the block spacing, and simulation of the fillet photo effect, the results are as follows:

You can now get a beautiful Waterfall Stream Gallery page.

But there is a problem if you use the full-page Ajax feature of JQuery Mobile when you switch pages, set the properties of the hyperlink tag to "data-ajax=" true ", then in Ajax The loaded page does not apply the waterfall stream effect.

In order to solve this problem, I have done a lot of tests, and finally identified a method:

<Scripttype= "Text/javascript">$ (document). On ("Pagechange", function(Event) {$ ("# @id"). Masonry ({itemselector:". Post", Isfitwidth:true            });    }); </Script>

At the bottom of the waterfall flow container, add the above JS code block, which is executed with Ajax loading to register the Pagechange event and initialize the waterfall stream effect when the event occurs.

Pagechange event is the best time for me to test the application, the waterfall flow effect, the page layout is not finished, the page width can not be correctly obtained, will cause the waterfall flow into a column vertical row.

However, the Pagechange event is really late, Ajax loading we will clearly see the image block is displayed in the image without the layout decoration, and then become the waterfall flow effect we need, which is very bad, for this we embed the JS code to make this adjustment:

$ ("# @id"). FadeTo (0, 0);        $ (document). On (function  (event) {            $ ("# @id"). Masonry ({                ". Post",                 true            });            $ ("# @id"). FadeTo (0, 1);        });

That is, set its opacity to 0 when loading, and then set it back to 100% after applying the waterfall stream, so it looks completely fine.

This is all done.

This waterfall flow layout changes at any time with the size of the window, and has a better layout on devices of different sizes.

Here's how it looks on a 10-inch Android tablet with 1080P resolution:

Here's how it looks on the 5-inch Android phone screen at near 1080P resolution (1800*1080):

Implement waterfall flow Map Library layout in JQuery Mobile