Gamma Gallery – Responsive Image Gallery Experiment

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account. 

Gamma Gallery uses Masonry in a fluid mode where column numbers are defined depending on the grid container sizes.

Inspired by Picturefill , the responsive images approach that mimics the picture element, we’ve come up with the following HTML structure for defining different image sizes.

Grid-A-Licious – Responsive Grids With jQuery

Grid-A-Licious is a jQuery plugin that enables us to easily create Pinterest-like floating-grid layouts. There are other resources to create such an output but Grid-A-Licious differs itself by offering a completely responsive solution. 

Regardless of the screen size or device, the grid fits perfectly as it is floating and fluid. Plugin supports appending/prepending new items to the grid which is useful for dynamic layouts.

Muuri – Responsive, Sortable, Filterable and Draggable Grid Layouts

Muuri creates responsive, sortable, filterable and draggable grid layouts with lots of features in one library. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and jQuery UI sortable.

  • Customizable layout

    Muuri's layout system allows positioning the grid items within the container in pretty much any way imaginable. The default "First Fit" bin packing layout algorithm generates similar layouts as Packery and Masonry. The implementation is heavily based on the "maxrects" approach as described by Jukka Jylänki in his research A Thousand Ways to Pack the Bin. However, you can also provide your own layout algorithm to position the items in any way you want.

  • Drag & drop

    Built-in support for dragging and dropping the grid items powered by Hammer.js. The drag and drop stuff is completely optional and Hammer.js is not required as a dependency if you are not using the drag and drop feature.

  • Simple and powerful API

    Simple API with enough methods and events to gain full control over the library's behaviour. For example custom filtering and sorting of the grid items can be implemented easily (check the source of this site for starters).

  • Fast animations

    Fast and highly customizable positioning and show/hide animations powered by Velocity.js.

  • Good browser support

    Works in all modern browsers and IE9+.

  • Fully open source

    Muuri is MIT licensed.