Collages

Arranging Photos In Attractive Ways

Will Woodgate

Stacks4Stacks - Masonry Stack Using Javascript

See also, the CSS version

Masonry grids are a popular trend all over the modern internet. The asymmetric randomness makes an interesting way to present content, with the ability for the grid to resize and reflow to fit different screen sizes. Our Masonry stack provides you the choice between either a CSS or Javascript derived grid layout. Options are provided to allow quick restyling of the grid spacing, borders and shadow effects. A key benefit of our Masonry stack is that alongside support for images, you can embed many other content types too, like text and video.

Individual bricks can be set as links to other webpages or configured to launch lightbox stacks. Another bonus feature is the ability to make bricks time-sensitive and have them hidden or shown when a certain time has passed - particularly useful for building a calendar of events.

Benefits

  • Each brick is actually a drop zone - that Masonry can turn into a link, So this could be a giant menu
  • The bricks can be timed to appear
  • Brick # of rows set t 1, 2, 3. 4 depending on screen size
  • Brick borders and panels can be styled
  • Descriptions can be added in HTML stacks as text below the image