CODEWITHSUNDEEP
jqueryfluid-layoutjquery-masonryjquery-isotope
briteweb
briteweb

Reputation: 275

jQuery Isotope - fluid layout with two different size elements

I have a basic layout of photos (for a portfolio) on a page. There are two different size image bricks, the larger one is proportional to the smaller and exactly twice the width and height, and no margin between the blocks or the window. There are only a few larger blocks mixed in with a couple dozen smaller ones. It is a responsive design so it is five 20% columns on the full-size site and three 33.333% columns when the window size drops down below a certain width, all within a 100% max-width container. The images are set to 100% width and auto height with CSS, inside each brick. I've included a wireframe to illustrate what I'm describing.

The issue I'm having is with getting Isotope to respond to the fluid layout. If I load the page in a window wider than the max-width, it places the blocks exactly as expected. However, when I shrink the browser window below the max-width, the blocks start getting really wonky, in some variation of: stacked in a single column; stacked in two columns with an empty column between; gaps between the images; leaving an empty row beneath the large image.

I'm probably not explaining myself very well, but just wondering if anyone has experience using Isotope with fluid layouts and might have some insight.

layout

Upvotes: 1

Views: 7395

Answers (2)

Futurefabric
Futurefabric

Reputation: 43

I am working on a layout that poses similar problems and have resolved it using Isotope's new packery layout option. What a godsend! — http://isotope.metafizzy.co/layout-modes/packery.html

Upvotes: 1

Lauren
Lauren

Reputation: 255

I was able to achieve this by omitting the column calculation lines of code from the isotope responsive demo here. 

$container.isotope({
    itemSelector : '.thumb',
    //disable resizing
    resizable: false,
});

//update columnWidth on window resize
$(window).smartresize(function(){
    $container.isotope({
    });
});

This maintains the animated 'smart resize' capability but allows you to use regular css media queries to control the number of columns (set the element ".thumb" to the desired percentages of the container in your media queries).

Upvotes: 5

Related Questions