The Wookmark jQuery plugin

We have received several questions about how the grid layout is created so we created this simple plugin. It lays out a series of elements in a dynamic column grid.

How to use it

  1. Download the Javascript plugin file from the Github repository
  2. Include the file in your website (after your include of jQuery)

  3. Run it on your content

  4. Adjust the options (they are all optional)

    • container - the width of this element is used to calculate the number of columns, defaults to "window". For example $('myContentGrid'). Container should also have the CSS property "position: relative".
    • offset - vertical and horizontal distance between items, defaults to 2
    • itemWidth - width of a single grid item, defaults to width of first provided item

To contribute, visit Wookmark on github.

Wookmark jQuery plugin example

A live example

Below are the current 20 most popular images on The Wookmark plugin detects the size of the window and automatically organizes the images into columns. Resize your browser to see the layout adjust. Note how the columns are approximately of equal height.

  • testino mario | KROUTCHEV PLANET PHOTO
  • If your dreams don't scare you, they aren't big enough. Quotes.
  • plants are always growing / .
  • Do more of what makes you happy.
  • Designspiration — Gridness
  • Live Your Life ?
  • City typography
  • Density Design | BLDGWLF
  • ??????? ????-?????????????
  • Illustration / Giraffe Portrait — Designspiration
  • Density Design | BLDGWLF
  • Things I Like / Tilt-shift perspective photography.
  • Electress.jpg (719×2000)
  • ? ??????? ? / .
  • tumblr_m1uvstMGY81qf14n4o1_400.jpg (385×500)
  • Density Design | BLDGWLF
  • Citroen DS3 Cab on Web Design Served
  • My neighbours listen to good music whether they like it or not.