Masonry.js Demo
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
When I narrow the browser, the images turn into two columns which are responsible to the browser size.
I'll use Masonry.js in the rightArea, loading in different height images through json.
SCSS:
I built a scss file to complete the styling part.
This main section is styling each kind of grid.
JS:
First,I apply the masonry on .grid div in the HTML. Either
isFitWidth makes every column same width which looks neat.
gutter makes some space between each grid_item.
Second, it's convenient to add images into the grid div through Json. More easy to handle the content in the future.The critical point is using append() .
For example,http://www.erikjohanssonphoto.com/work
Today,I gonna try this plugIn with fashion topic.
Here is the code part:
HTML
SCSS:
JS:
columnWidth needs to be set to a fixed size, like columnWidth: 120, or items need to have a fixed size in pixels, like width: 120px. isFitWidth makes every column same width which looks neat.
gutter makes some space between each grid_item.
Second, it's convenient to add images into the grid div through Json. More easy to handle the content in the future.The critical point is using append() .
In the Json file,you can edit whatever link you like.
The Masonry.js is cool. But I feel like to combine with other plugIn to smooth the web responsible.
More official function, check on http://masonry.desandro.com/
My demo download here https://pan.baidu.com/s/1slb1oqp
