How to use jQuery Masonry with elements of different width?

Question

I am implementing the jQuery Masonry plugin, but I have problems with elements wider than one column, meaning that the div width of all Masonry elements is not identical. Could anybody help me with this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/masonry.min.js" type="text/javascript"></script>
</head>
<style>
.item0,.item1,.item2,.item3,.item4,.item5,.item6,.item7,.item8{float:left;  margin: 10px;
  background:#999;}

.item1,.item0 {
    width:300px;
}
.item2 {
    width:200px;
}
.item3,.item8 {
    width:100px;
}
.item4,.item5,.item6,.item7{
    width:100px;
}

#container{
    float:left; width:1000px;
    }
</style>

<script type="text/javascript">
$(function(){
  $('#container').masonry(
  {});
});
</script>
<body>
<div id="container">
  <div class="item0">1 tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf</div>
  <div class="item0">2 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div>
  <div class="item1">3 sdfsdfsdf  sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
  <div class="item2">4 tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf</div>
  <div class="item3">5 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div>
  <div class="item4">6 sdfsdfsdf  sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
  <div class="item5">7 tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf</div>
  <div class="item6">sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div>
  <div class="item7">sdfsdfsdf  sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
  <div class="item8">tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf</div>
   <div class="item7">sdfsdfsdf  sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
  <div class="item8">tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf</div>
</div>
</body>
</html>

score 47 · Answer 1 · edited Sep 19 '12 at 12:50

47

After a half day of trying different settings, trying to find out why my masonry plugin is not working, i read these post, i got the idea... i had to use the minimum common denominator of all my widths. But i had widths like 346, 278, 199... so i wondered, without any headache any of those widths is dividable by 1, so i tried... and magic happened, everything fell perfectly on into place.

So the simplest way to get it working, use 1 as columnWidth

edited Sep 19 '12 at 12:50

Asciiom

9,867
7
38
57

answered Sep 19 '12 at 10:42

czlory

471
4
2

1

You mean the greatest common factor, thanks though this is the only solution that was able to fix my issue, – Javier Villanueva Jun 19 '13 at 19:14
2

Thank you!! God damn that was a lot more difficult to think about than it needed to be. – Richard Hedges Aug 04 '14 at 15:31
Can you post an example of this? – Oleg Belousov Feb 13 '16 at 05:32
Ha! Kind of silly ... Thanks for your time ;) you saved me half of a day – GDY Aug 05 '16 at 05:30
You're a hacker. Thank you, sir. +1 – kevr Oct 03 '16 at 20:08

frozenkoi · Answer 2 · 2013-09-25T21:31:39.453

16

If you don't set a column width parameter when you set up masonry (i.e. $('#container').masonry({columnWidth:100})), then masonry defaults to the first brick's width. In your example, the 1st block is 300 pixels wide, so the minimum width a block will cover is 300 pixels, even tho its width is set to 100 pixels.

A good column width number would be the minimum of the possible widths can be (like in your example, where they are all a multiple of 100px), or the greatest common divisor (for example, if bricks are 100, 150 and 200 pixels wide, 50 would be a good number to use for columnWidth).

edited Sep 25 '13 at 21:31

answered Nov 22 '11 at 20:02

frozenkoi

3,228
22
33

3

At last, someone explains the way to think about the column width understandably, not in gibberish like usual. – Systembolaget Aug 11 '12 at 12:40

score 4 · Answer 3 · answered Jul 17 '11 at 17:27

4

because of a margin: 10px; in your all item div's. so you should set a columnWidth : 120

$(function(){    
    $('#container').masonry({
        columnWidth : 120 
    });
});

answered Jul 17 '11 at 17:27

yuli chika

9,053
20
75
122

score 2 · Answer 4 · answered Jul 14 '11 at 14:03

2

You need to specify a columnWidth to let the masonry know how many column you want:

$('#container').masonry(
  {
     columnWidth : 100
  });

answered Jul 14 '11 at 14:03

Variant

17,279
4
40
65

But it's also the same after add "columnWidth : 100". It's not OK – Eric Jul 14 '11 at 14:44

score 0 · Answer 5 · answered Apr 28 '15 at 14:33

0

If you know a minimum column width, just set that in your columnWidth and it will work. In my case that was 396. I had a column with double that width as well.

$('.container').masonry({
  columnWidth: 396,
  itemSelector: '.item'

});

answered Apr 28 '15 at 14:33

jppag

37
1
8

How to use jQuery Masonry with elements of different width?

5 Answers5