Use the Masonry and jQuery. lazyload plug-ins to implement webpage waterfall stream layout. jquery. lazyload. js

Use the Masonry and jQuery. lazyload plug-ins to implement webpage waterfall stream layout. jquery. lazyload. js
Waterfall flow Layout

We often see a lot of waterfall layout pages on the Internet, especially many image websites, such as Baidu images. In the most typical waterfall flow layout, the width of each element is fixed, but the image length is different. Therefore, the elements are arranged vertically to maximize the page space utilization.

I didn't know much about front-end development. It took me a long time to find out the name of this layout.

Waterfall flow layout is not limited to an equal-width layout, for example, the following form can also beMasonryOfficial website.

Masonry http://masonry.desandro.com/

Waterfall stream layout is a responsive layout. webpage elements are automatically adjusted based on the page width. Press Ctrl and scroll the scroll wheel to zoom in and out the webpage. Then we can see that the typographical positions between the elements of the webpage are constantly changing, as shown in.

Waterfall flow layout implementation

The above wide waterfall flow layout seems easy to implement. However, due to the principle of HTML document stream, webpage elements are first arranged from left to right, and will only wrap when they exceed the limit, instead of being directly controlled from top to bottom, therefore, the direct use of HTML and CSS is not very good at processing, and the perfect waterfall stream layout needs to be usedjavascriptOrjQueryPlug-in implementation. It is not very clear here. You can refer to the detailed text and text explanations below. There are many ways to implement waterfall stream layout. This article is also detailed.

Waterfall flow layout http://ued.taobao.org/blog/2011/09/waterfall/

Masonry plugin

MasonryPlug-ins are used for waterfall flow layout. The following two figures show the web page layout before and after the plug-in is used, so it is easy to see its role.

Not usedMasonryThe webpage elements are arranged according to the HTML document stream, starting from left to right, and exceeding the line feed, there will be many gaps in the middle, as shown in.

UsedMasonryThen, the position of each element is automatically adjusted, and the gap is much less ,.

Basic use of Masonry

The Masonry plug-in has two versions, one of which is a nativejavascript,jQueryIf your webpage uses otherjQueryLibrary, it is recommended to use the latter, because the amount of code will be much less. The plug-ins of both versions can be found in the Demo in the attachment.

Masonry official GitHub Link (JavaScript version, including multiple Demo examples)
Https://github.com/desandro/masonry

JQuery Masonry can also be downloaded here (I don't know if this site is counted as an official website, it feels a bit messy)
Http://www.fishspotr.com

MasonryThe use of plug-ins is very simple, but the code in the Demo provided by the official GitHub is too long to be easily understood, so I provide a simplified Demo that uses the most common parameters. For specific parameters, refer to the official Demo.

CallMasonryThe code can be written in<script>Tags can also be directly written in the HTML Tagdata-masonry-optionsAttribute,javascriptThe version code is written indata-masonry-optionsAttribute.

In addition, many documents on the Internet are incorrect. Official documents are used to confuse the two versions. For examplejQueryAndjavascriptSome versions have different parameters, suchjavascriptVersiongutterParameters injQueryThe version isgutterWidthThis can be seen from the source code (or the parameter name may have been changed during version upgrade ).

Lazyload delays image loading

Common web pagesLazyloadThe plug-in delays image loading. When you scroll to the page and want to browse to the position where the image is located, the user starts to load the image. Otherwise, the image is not loaded. On the one hand, it can speed up the loading of web pages, because it saves a lot of image loading; on the other hand, it can save traffic, because it only needs to load pictures in the places where users scroll, if a user leaves the page halfway, some images will not be loaded.

By the wayLazyloadWhen using this plug-in,IMGTags must be written in this form:Src is a small placeholder image, and the actual image address is written indata-originalAttribute. Some people on the Internet say that Lazyload is useless and has bugs, because it is not written in this place.

In addition, to prevent some users' browsers from being openedjavascriptIn this way, the image will not be displayed, so it is necessary to add<noscript>Label: enter a normal image label in it. NojavascriptThis code will take effect, as shown below.

 
 

  
  

  
  
<noscript></noscript>
 
 

Masonry conflicts with the Lazyload plug-in

Use bothMasonryAndLazyloadPlug-ins may cause conflicts. BecauseMasonryYou need to obtain the size of each element to calculate the position of the element.LazyloadDynamic Loading of images results in element size changes.MasonryIt won't be re-computed, so the arrangement is messy ,.

The solution isLazyloadLoad an image to makeMasonryRe-layout. But I haven't found it for a long time.LazyloadCallback parameters ......

He has successively considered or tried rolling webpage events, IMG loading completion events, DIV size change events, and latency to triggerMasonryYou have also considered calculating the image label size in the background in advanceLazyloadSwitch to other plug-ins, but they do not feel good, inefficient, or troublesome.

The best way to do this is simply to change it.LazyloadThe source code is good. However, when I checked the source code, I accidentally discovered it.LazyloadThere are actually callback functions, that isloadParameters.

A large number of articles on the Internet are copied and pasted in the same way, and even the official website does not say this parameter ...... Is my open method incorrect?

My eyes on Lazyload official website http://www.appelsiini.net/projects/lazyload

The final solution is clear, and the key code is roughly as follows. The Demo sample is also included in the attachment.

 
 

  
  
<script>
  
  
$(function() {
  
  
    f_masonry();
  
  
    $("img").lazyload({
  
  
 effect:"fadeIn",
  
  
 failurelimit:40,
  
  
 load:f_masonry,
  
  
 });
  
  
});
  
  

  
  
function f_masonry() {
  
  
 $('.masonry').masonry({
  
  
 gutterWidth: 20,
  
  
 itemSelector: '.item',
  
  
 isAnimated: true,
  
  
 });
  
  
}
  
  
</script>
 
 

Finally, I spoke about all kinds of irresponsible articles on the Internet. The reference value is slightly lower and even a variety of errors (self-help clothes and food ).

Attachment: Demo
Https://github.com/jzj1993/masonry-lazyload-demos

This article by jzj1993 original, reproduced please note Source: http://www.hainter.com/masonry-lazyload-waterfall