JQuery Masonry Waterfall Flow Formation Artifact Usage

When you are doing a website recently, some of them involve a lot of pictures layout, I want to use a more popular Water Flow layout.

When I started, I wrote it. I didn’t think about the size of the picture, although I can reach the layout effect, but the picture has a small size of the picture, but I have been strong, see It is very unhappy. Later, I received it online, and I have a good Water Flow layout tool. Let’s meet this artifact ~
artifact name: jQuery Masonry, Website: http://masonry.desandro.com/index.html

The usage method is quite simple:

1, marking the container and Item


  


   ...    ...  ... 


Then add jQuery and masonry script references to the page, requiring jQuery version in 1.6+



   
2, write CSS

All elements that require layout are determined by CSS, all elements Must be floating
EG:

.item {width: 220px; Margin: 10px; float: left;}

 3, write scripting   
Write scripts to incorporate the initialization layout parameters, so that the container is automatically layout.
It is highly recommended to configure two parameters for ItemSelector and ColumnWidth. For more parameter configuration, please check the official website.


$ (Function () {$ (‘# Container’). Masonry ({// Options ItemSelector: ‘.Item’, ColumnWidth: 240})

OK, it ends. SO Easy ~ jQuery Masonry瀑布流布局神器使用详解

The above is all the content of this article, I hope to help everyone, I hope everyone Support TUMI clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment