Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark

Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark
File Size: 1 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Wookmark is a jQuery Plugin that lays out a series of elements in a dynamic column grid layout like pinterest.com.

You might also like:

Features:

  • Responsive design
  • Auto-update the layout when the browser window is resized
  • Endless-scroll support
  • Grid filter support

How to use it:

1. Include jQuery Library and jquery.wookmark.js in your website:

// jQuery 1.6.2 or better
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
<script type="text/javascript" src="jquery.wookmark.js"></script>

2. Run it on your content

<script type="text/javascript">$('#myContent li').wookmark({offset: 2});</script>

3. Default options

$('.myElements').wookmark({

align: 'center',
autoResize: true,
comparator: null,
direction: undefined,
ignoreInactiveItems: true,
inactiveClass: 'wookmark-inactive',
itemSelector: undefined,
itemWidth: 0,
fillEmptySpace: false,
flexibleWidth: 0,
offset: 5,
outerOffset: 0,
onLayoutChanged: undefined,
placeholderClass: 'wookmark-placeholder',
possibleFilters: [],
resizeDelay: 50,
verticalOffset: undefined

});

More Examples:

Change Logs:

v2.1.2 (2017-01-11)

  • FIX: Resize and refresh events were not triggered correctly
  • Use own $ variable, make sure Jquery can be loaded

v2.1.1 (2016-04-15)

  • FIX: Layout on hidden containers couldn't be forced
  • FIX: Items were not rendered when ignoreActiveItems was set

v2.1.0 (2016-03-10)

  • FIX: Simple example didn't work properly
  • FIX: Reduce flickering on loading
  • FIX: Only enable transition after wookmark has initialized
  • FIX: Defined dev only scripts in package.json
  • FIX: layout call didn't trigger item height recomputation
  • ADD: Add initialised state after first layout
  • CHG: Updated readme

v2.0.1 (2015-06-16)

  • bugfix.

v2.0.0 (2015-02-16)

  • Rewrite of plugin to work without jQuery
  • New initialization code (see the readme)
  • jQuery and imagesloaded plugins are now installed with bower
  • Source is now lint-free and much more optimized for speed
  • Ignoring most files when installing with bower
  • itemWidth and flexibleWidth can now be functions returning a number or percentage

v1.4.8 (2014-07-09)

  • FIX: In jquery amd dependency. Patch by Guido Contreras Woda. Thanks!
  • ADD: Waffle.io badge. Will check out if it's cool to manage issues there.
  • CHG: Using MagnificPopup instead of Colorbox in examples. Works better with endless scroll and filtering.

v1.4.7 (2014-05-19)

  • ADD: example-api now has an additional example for a custom php based server app
  • FIX: Example amd was missing required shim so imagesLoaded plugin attaches itself to jQuery
  • ADD: "Mentioned or used by others" section to readme
  • ADD: dryRun feature for filtering and the filter call will return the list resulting list of items as jQuery object
  • CHG: Small optimization for window object
  • CHG: Starting opacity for list items in examples is now 1 so opacity animations have a starting point

v1.4.6 (2014-01-14)

  • New option 'verticalOffset'. Old option 'offset' still defines the horizontal offset between tiles.
  • Added 'Reset filters' button to filter examples.
  • 'flexibleWidth' will now be handled a bit differently. When set the plugin will try to fit as many columns into the container as possible. itemWidth is then the minimum width of those columns.

v1.4.5 (2013-11-22)

  • Fix for placeholders in non-chrome browsers.
  • The clear method of the wookmark instance will remove the instance itself.
  • New introduction page with links to examples. Will work on that further on the way to 1.5.0.
  • Fixed bug in example-amd with requirejs.
  • CSS changes will be executed as bulk with requestAnimationFrame when available.
  • Added progressbar to imagesloaded example.
  • Filterclasses can be updated via the wookmarkInstance of the handler.

v1.4.4 (2013-10-17)

  • Wookmark layouting won't break when container isn't visible at the start. But you should call 'refreshWookmark' after making it visible.
  • Added 'possibleFilters' option. With this you can have filter even when no items fit. Patch by Aakash Goel.
  • Fix when filtering and no items match. Patch by Gabriel Kaam. 

v1.4.2 (2013-08-12)

  • 'flexibleWidth' now works as expected when it's greater than 50% or more than half of the containers width in pixels.

v1.4.0 (2013-08-02)

  • Added sort example. 
  • Fixed column counter.
  • Fixed offset when alignment is used.

This awesome jQuery plugin is developed by germanysbestkeptsecr. For more Advanced Usages, please check the demo page or visit the official website.