Responsive Masonry layout without predefined widths

Question

I'm creating a 2 column masonry layout using images of different sizes. The images can be any size as long as they have the greatest common divisor (as required by the Masonry plugin).

In order to make the layout responsive I'm converting the width of the masonry items into percent (or I can use min-width and width 100%).

Update: I noticed that many who answer make both columns 50% as a solution. That works but is not the goal. Images have to retain their original image size. They can shrink but keep the same ratio.

$(function () {    
    var container = $('#container');

    // Convert .box width from pixels to percent
    $('.box').find('img').each(function () {
        var percent = ($(this).width()) / container.width() * 100 //convert to percent;
        $(this).closest('.box').css('max-width', percent + '%');
    });

    // Trigger masonry
    container.masonry({
        itemSelector: '.box',
        columnWidth: 1 //widths dividable by 1
    });
});

jsfiffle: http://jsfiddle.net/AMLqg/278/

This seems to work. The items are fluid when you resize the window. However if you load the script in a small window size (smaller than the 2 column width) the items collapse. How can I keep the masonry items responsive on window load even when the window is smaller?

Update: Here is more info for a better understanding. I'm trying to keep 2 responsive columns regardless of the window size. The columns can't have equal widths because the images have different widths. For this reason I'm using columnWidth: 1 because all widths are dividable by 1.

Please see images below for examples.

Problem: When you open the page in a small window the elements are collapsed. When you resize the window to be larger the elements remain collapsed until the window width is larger than the width of both elements.

Goal: I'm trying to keep the elements in 2 responsive columns on load like in the image below. Currently they remain responsive if on load the window is large and you resize it to be smaller but not vice verse when window is small on load and you make it larger.

Answer 1

You can try overflow:hidden on the surrounding box.

Answer 2

Using imagesloaded.js and columnwidth set using css like so:

jsFiddle

<div id="container">
<div class="grid-sizer"></div>
<div class="box">
    <img src="http://images.huffingtonpost.com/2007-11-01-ice.jpg" />
</div>
<div class="box">
    <img src="http://www.wwalls.ru/mini/201211/57608.jpg" />
</div>
<div class="box">
    <img src="http://artistsandwriters.com/site/wp-content/uploads/2014/09/IMG_7303LR-390x150-1412284267.jpg" />
</div>
</div>

Script

$(document).ready(function () {
 var container = $('#container');

 $('.box').find('img').each(function () {
     var percent = $(this).width() / container.width() * 50;
     $(this).closest('.box').css('max-width', percent + '%');
 });

 // Trigger masonry
 container.imagesLoaded(function () {
     container.masonry({
         itemSelector: '.box',
         columnWidth: '.grid-sizer'
     });
 });
 });

CSS

#container {
max-width:580px;
}
.box {
float: left;
margin-bottom: 5px;
}
.box img {
 width: 100%;
}
.grid-sizer {
 width: 50%;
 }

Answer 3

EDIT

Check this http://jsfiddle.net/gk3t009j/2/

CSS

#wrapper
{
    background-color: red;
    margin: 0 auto; max-width:580px;
}

#container,
{
       overflow: hidden; 
       width: 100%;
}
.box
{       
    max-width: 290px!important; width: 50%;     
}

.box img{width: 100%;}

JS

$( window ).load( function()
{
    var wc=$( '#container').width();
    wc=parseInt(wc);
    if( wc % 2) 
    {
        var wb=$('.box').width();
        wb--;
        $('.box').width(wb)
    } 


    $( '#container').masonry(
    {
        itemSelector: '.box',
        columnWidth: function( containerWidth ) {
            return parseInt(containerWidth / 2);
          }

    });
});

HTML

<div id="wrapper">
    <div id="container">
        <div class="box">
            <img src="http://images.huffingtonpost.com/2007-11-01-ice.jpg" />
        </div>



        <div class="box">
                <img src="http://www.wwalls.ru/mini/201211/57608.jpg" />
            </div>
            <div class="box">
                <img src="http://artistsandwriters.com/site/wp-content/uploads/2014/09/IMG_7303LR-390x150-1412284267.jpg" />
            </div>
    </div>
</div>

Answer 4

Are you looking for something like this?

Fiddle

So, all we're doing here is getting rid of your percentage calculation (of which I really don't understand the necessity), and setting a min-width on the .box class. Just like this:

.box {
    float: left;
    min-width: 100px;
}

I was able to reproduce your problem. This is how it looks for those curious:

The problem is your float: left rule in the CSS, which is collapsing the box when Masonry is doing its positioning calculations after adding the image. You can do a simple clear-fix to keep this if you really need to keep that clunky percentage calculation, like so:

.container:after {
   content: '';
   display: table;
   clear: both;
}

Hope that helps!

Edit – Based on your comments:

Okay, if you always want there to be two columns, it's an even simpler change:

Get rid of this Javascript

// Convert .box width from pixels to percent
$('.box').find('img').each(function () {
    var percent = $(this).width() / container.width() * 100;
    $(this).closest('.box').css('max-width', percent + '%');
});

Add this CSS

.box {
   max-width: 50%;
}

Fairly straightforward, I think.

Here's a fiddle, just for giggles

Answer 5

I removed the JS code and some of the HTML markup and updated the styling:

#container {
    width: 100%;
}
img {
    display: inline;
    vertical-align: top;
    float: left;
    min-width: 50%;
    width: 50%;
}

http://jsfiddle.net/org6nsr8/8/ I agree with Josh Burgess on that Masonry is not needed to accomplish this, take a look and see if this is what you're after.

I'd be happy to elaborate if something is unclear or you want anything explained.

Answer 6

You don't need the JavaScript; just change the css for .box to:

.box {
    float: left;
    max-width: 50%;
}

Answer 7

After trying several library to make a masonry layout , I prefer salvattor.js

Very easy to use. the size of the columns you can configure css.

@media screen and (max-width: 480px){
    #grid[data-columns]::before {
        content: '1 .column.size-1of1';
    }
}

Answer 8

I am not sure if this is what you need. If I understood the problem correctly may be you need to use max-width instead of width.

Here is example fiddle : http://jsfiddle.net/AMLqg/304/

My JS code :

        $(function () {

            var container = $('#container');
            var maxWidth = container.css("maxWidth");
            maxWidth = parseInt(maxWidth.substring(0,maxWidth.indexOf("px")));
            // Convert .box width from pixels to percent
            $('.box').find('img').each(function () {
                var percent = ($(this).width()) / maxWidth * 100;
                console.log(percent);
                $(this).closest('.box').css('max-width', percent + '%');
            });

            // Trigger masonry
            container.masonry({
                itemSelector: '.box',
                columnWidth: 1 //widths dividable by 1
            });
        });

Answer 9

What i understand you want to keep Layout 2 Column with Images on aspect ratio on all screen sizes ,

Check

http://jsfiddle.net/tasaeed/k40cgfye/

CSS

#container {
  max-width: 580px;
}

.box {
  float: left;
  width:50%;
}

.box img {
  width: 100%;
  height:auto;
}

Script

$(function () {

    var container = $('#container');

    // Trigger masonry
    container.masonry({
        itemSelector: '.box',
    });
});