Implement waterfall stream gallery layout in JQuery Mobile, jquery Gallery

Implement waterfall stream gallery layout in JQuery Mobile, jquery Gallery

First, let's look at the effect shown on the Windows P display:

Var id = "gallerycontent" + Guid. NewGuid ();

Initialize with HTML initialization:

<div 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 previous variable. The style attribute and the isFitWidth option are used together to implement the automatic horizontal center function of the container. I didn't specify the column width option as in the Masonry getting started tutorial, I think it seems useless to my project. I can use the css box model to better control the column width and spacing of the image block.

Pseudocode of the internal image block:

<Div class = "post" style = "height: @ (260/1. 0/image1. width * image1. height) px "> <a data-ajax =" true "href =" @ image1. large image address ">  </ a> </div> <div class = "post" style = "height: @ (260/1. 0/image2. width * image2. height) px "> <a data-ajax =" true "href =" @ image2. ">  </ a> </div> ............

Class corresponds to the itemSelector option in the initialization option; the source image size is irregular, and the img width is set to 260, so that the image height will automatically proportional change; after my test, to display the image properly, you must specify the height of each block. Since there is almost no front-end development, I do not know how to obtain the size of the source image for common pages, fortunately, the image size in my project is recorded in the database at the time of uploading. Here we only need to get the size, perform a simple proportional scaling operation, and write it to the style attribute.

The post class definition in the css file:

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

The main purpose is to control the block spacing and simulate the effect of rounded corner photos. The rendering effect is as follows:

Data-ajax = "true", the page after Ajax loading will not apply the waterfall effect.

To solve this problem, I did a lot of tests and finally determined this method:

<script type="text/javascript">        $(document).on("pagechange", function (event) {            $("#@id").masonry({                itemSelector: ".post",                isFitWidth: true            });        });    </script>

Add the above JS code block to the bottom of the waterfall stream container to execute it with Ajax loading to register the pagechange event and initialize the waterfall stream effect when the event occurs.

The pagechange event is the best application time I have tested. If the waterfall effect is applied too early, the page layout is not completed yet, and the page width cannot be correctly obtained, which leads to the waterfall flowing into a vertical column.

However, the pagechange event is indeed quite late. During Ajax loading, we can clearly see that the image block is first displayed in an image without layout modification, and then becomes the waterfall flow effect we need, this is very bad, so we make such adjustments to the embedded JS Code:

$("#@id").fadeTo(0, 0);        $(document).on("pagechange", function (event) {            $("#@id").masonry({                itemSelector: ".post",                isFitWidth: true            });            $("#@id").fadeTo(0, 1);        });

That is, when loading, set the opacity to 0 first, and then set it back to 100% after applying the waterfall stream. This seems completely OK.

This is all done.

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

 

The following figure shows the display effect on a 10-inch Android tablet with a P resolution:

The following figure shows the display effect on a 5-inch Android phone screen with a resolution of nearly 1800 P (1080:

Web design waterfall flow Layout

The general web page width is best controlled between 980-1000, both to ensure the quantity and quality, preferably 3 div can be, e-commerce website pictures are very important, pictures are too small, the content is not rich, not attractive


 
On the home page of zhimeng, how does one achieve the effect of image waterfall streaming?

Image list
<Div id = "mynews"> <li class = 'col'> ............ </li> <li class = 'col'> ............ </li> <li class = 'col'> ............ </li> <li class = 'col'> ............ </li> <li class = 'col'> ............ </li> ...... </div>

The image list is followed by a page flip code. You must have a link to the next page to automatically add the next page to the current page when scrolling the page.
<Div class = "dede_pages"> <ul id = "pagelist"> <li id = "nx"> <a href = "index2.html"> </a> </li> </ul> </div>

Use the masonry plug-in to code the page before </body>.
<Script type = "text/javascript" src = "/images/js/jquery. masonry. min. js "> </script> <script type =" text/javascript "src ="/images/js/jquery. infinitescroll. min. js "> </script> <script language =" javascript "type =" text/javascript "> $ (function () {// use the masonry plug-in var $ container =$ ('# mynews'); // # mynews is the container id of the heap image on your homepage $ container. imagesLoaded (function () {$ container. masonry ({itemSelector :'. col ', columnWidth: 242, isAnimated: true}) ;}); $ container. infinitescroll ({navSelector: '# pagelist', // selector for the paged navigation nextSelector:' # nx A', // selector for the NEXT link (to page 2) itemSelector: '. col ',/& #4 ...... remaining full text>