jQuery Isotope — Centered and Fluid/Responsive

Question

I am asking a question about Isotope

It is a great plugin for jQuery.

I have been playing with it for a while now, but I don't know enough about javascript to combine two of the Isotope techniques, responsive Isotope and centered Isotope.

I have sucessfully used the responsive mod and it worked pretty well, except now I need to center the whole thing within a div. The centered layout mode isn't documented as well as the responsive mode, so I am having some trouble getting it to work. Basically the inscructions for the centered layout mode are :

To use this mod, copy the revised methods found in the demos’ page source.

Unfortunately, there are all sorts of javascript things going on in the view source and I don't have enough experience with javascript to pick it out and also combine it with the responsive script I already have working.

Any help would be greatly appreciated.

A site with a working example of what I need.

My site that I am experimenting with.

Works better in Firefox I think.

Thank you so much for asking this question! I have been struggling with this for the past 9 days! — Digital Brent, May 08 '13 at 18:48

score 9 · Answer 1 · answered Jun 13 '12 at 09:34

9

Here is an example provided by David DeSandro himself:

http://jsfiddle.net/desandro/P6JGY/6/

answered Jun 13 '12 at 09:34

gang

1,670
2
22
36

5

That's helpful, but that example is not fluid. This site is fluid: http://www.aarontolley.co.uk/ – davecave Jun 13 '12 at 14:55

Jonny · Answer 2 · 2013-11-28T15:26:09.840

This jsfiddle will probably solve your problem: http://jsfiddle.net/schmidjon/6Z3sn/. It's a simple extension to Isotope with breakpoints:

(function ($) {
var $container = $('.example'),
    colWidth = function () {
        var w = $container.width(), 
            columnNum = 1,
            columnWidth = 0;
        if (w > 1200) {
            columnNum  = 5;
        } else if (w > 900) {
            columnNum  = 4;
        } else if (w > 600) {
            columnNum  = 3;
        } else if (w > 300) {
            columnNum  = 2;
        }
        columnWidth = Math.floor(w/columnNum);
        $container.find('.item').each(function() {
            var $item = $(this),
                multiplier_w = $item.attr('class').match(/item-w(\d)/),
                multiplier_h = $item.attr('class').match(/item-h(\d)/),
                width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
            $item.css({
                width: width,
                height: height
            });
        });
        return columnWidth;
    },
    isotope = function () {
        $container.isotope({
            resizable: false,
            itemSelector: '.item',
            masonry: {
                columnWidth: colWidth(),
                gutterWidth: 4
            }
        });
    };
    isotope();
    $(window).smartresize(isotope);
}(jQuery));

Source: Using jQuery Isotope for masonry in fluid layouts

Note that [link-only answers](http://meta.stackoverflow.com/tags/link-only-answers/info) are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. — kleopatra, Oct 03 '13 at 15:15
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Stefano Sanfilippo, Oct 03 '13 at 19:51

score -1 · Answer 3 · answered Sep 15 '13 at 18:34

try using the transition on your css file for each of your classes on child content. it should be helpful and it can be more slowmo

.css

 -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

hope this working

jQuery Isotope — Centered and Fluid/Responsive

3 Answers3

Linked