1. New
  2. Categories
  3. Surprise
  4. Videos
  5. Colors
Log in

Help

Wookmark

The Wookmark jQuery plugin

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

Mentioned by Web Appers, Design Shack, Web Design Ledger, SpeckyBoy, Queness, Web Resources Depot, HongKiat, DevSnippets, CodeVisually, How Design, Tympanus, David Walsh, JaxEnter and others.

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 (all optional, see GitHub for examples)

    • align - "left", "right", or "center"
    • autoResize - if "true", updates layout after browser is resized
    • resizeDelay - default is "50", time in miliseconds between browser resize and layout update
    • comparator - a custom sorting function
    • 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".
    • direction - "left" or "right", whether to start in top left or top right corner
    • ignoreInactiveItems - if "true", inactive items will still be visible, which can be used to fade filtered items out
    • itemWidth - width of one grid item in pixels ("200") or percentage ("10%"), defaults to width of first item
    • fillEmptySpace - if "true", creates placeholder at bottom of each column to create an even layout. Placeholders elements have the class "wookmark-placeholder".
    • flexibleWidth - "true" or "false", adjusts item width to create optimal layout based on browser size
    • offset - vertical and horizontal distance between items, defaults to 2
    • onLayoutChanged - a function that gets called after every layout change
    • outerOffset - default is "0"

See examples (sorting, filtering, stamping, endless scroll, lightbox, API integration...) and contribute, Wookmark on github. Have fun.

Wookmark jQuery plugin example

A live example

Below are the current 20 most popular images on wookmark.com. 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.

  • 2ac2dd96bef77f97469ff7b.jpg (JPEG Image, 487 × 750 pixels) - Scaled (98%)
  • 3c379257cd26a8c7836ab4.png (PNG Image, 500 × 750 pixels) - Scaled (98%)
  • 1a4eb330faedaf27efd32177c6f95c8c.jpg (Image JPEG, 292 × 750 pixels) - Redimensionnée (85%)
  • Trendenser -
  • 45f0fde9b6b8bfade3c35aae.jpg (JPEG Image, 500 × 750 pixels) - Scaled (98%)
  • f65fb1c965be82e9b4b97b26f05ad427.jpg (Image JPEG, 700 × 1575 pixels) - Redimensionnée (40%)
  • 90e6a8fd2852457062cd81febf6300d0.jpg (JPEG Image, 736 × 1104 pixels) - Scaled (80%)
  • Pin de Daniela Résio em Field Journal {Illustration} | Pinterest
  • Bolt UI Kit
  • 23fb2a223b2118533f2d71c.jpg (JPEG Image, 500 × 750 pixels)
  • ee7f659ffe7269da8485d31.jpg (JPEG Image, 636 × 960 pixels) - Scaled (83%)
  • tumblr_nai55oCQcS1r6mdwlo1_500.jpg (JPEG Image, 434 × 557 pixels)
  • Heck House » Please, Step into My Office
  • Web | EF Careers on
  • abdb57b51e493391d47ef092.jpg (JPEG Image, 236 × 354 pixels)
  • 77172a7952896b8b0c612c4.jpg (JPEG Image, 833 × 795 pixels) - Scaled (92%)
  • 599d961f9df2b2af67d2788.jpg (JPEG Image, 467 × 700 pixels)
  • Silence Television
  • 2bcaa3aaa95e7c589c7dfff992e148ee.jpg (Image JPEG, 578 × 900 pixels) - Redimensionnée (71%)
  • Packaging Design / Greek Chicken Souvlaki {street food monday}