7

I've been trying Masonry but can't get it to work exactly as I wanted. The elements I use vary in width and height, but all fit in a grid (4 different sizes, all multiple of smallest+margins). I've also calculated a distribution of elements (7 of the smallest, 4 of all the others) that can fit precisely.

However it's rare that masonry manages to fit them neatly, sometimes there's one lurking at the bottom, sometimes several are misplaced. It's always so that in one view I can see what items need to be moved for it to fit.

Is there a way to make masonry more aggressive in moving elements? Or have it go over two times to make sure there are no empty spaces?

Berggeit
  • 253
  • 1
  • 2
  • 11
  • I assume this is the problem you're encountering: http://joemarty.mediacoop.org/dev/sandbox/freetile/ this is an example I came up with for Freetile, which is another jQuery plugin fashioned after Masonry. So far I have not found any plugin which can better handle this case, but the logic for both Masonry and Freetile is very close. It is possible... comment here: http://yconst.com/support/discussion/226/filling-in-leftover-space#Item_1 – mltsy Feb 05 '13 at 23:38

2 Answers2

7

You should probably look at masonry's "big brother" Isotope here. Mind you, if you have elements that are sorted in a certain order or fixed in a certain order - and that are wider than a single column width - they can "block" a column at narrow browser widths.

enter image description here

EDIT Maybe this fiddle explains it a bit better. If you look at that one and - while observing the numbers in the divs - you see that the next masonry element up (the red element 5) can not possibly fit in the white square as it must come after element 4; so where it must end up means, that, with only three rows fitting, one gets a white gap. Maybe you can use Isotope's shuffle and/or reLayout methods and sacrifice ordering your elements in a strict order? Best would be a jsfiddle with your issue.

<article>
  <div class="tile blue"><p>1</p></div>
  <div class="tile black"><p>2</p></div>
  <div class="tile tall yellow"><p>3</p></div>
  <div class="tile grey"><p>4</p></div>
  <div class="tile wide red"><p>5</p></div>
  <div class="tile green"><p>6</p></div>
  <div class="tile grey"><p>7</p></div>
  <div class="tile blue"><p>8</p></div>
  <div class="tile green"><p>9</p></div>
</article>

$('article').isotope({
    itemSelector : '.tile',
    masonry: {
        columnWidth: 100
    }
});

article .tile {
    display: block;
    float: left;
    box-sizing: border-box;

    width: 100px;
    height: 100px;

    font-size: 3em;
    font-weight: 700;

    padding: 0 6px;
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    border:1px dotted black;
}

article .tile.wide {
    width: 200px;
}

article .tile.tall {
    height: 200px;
}

.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }
hakre
  • 193,403
  • 52
  • 435
  • 836
Systembolaget
  • 2,514
  • 2
  • 21
  • 37
  • I thought Isotope would use the same logic, and just added more features to Masonry? However, I've tried it now and see it's probably different, however results with Isotop are worse unfortunately, much more gaps still. On the browser width: I know, I tested specifically with a browser screen large enough for my container to be the intended size. – Berggeit Jul 28 '12 at 16:12
  • 1
    This gives an exact fit http://codecanyon.net/item/jquery-tiles-gallery/2281417 so maybe your concept can be tuned to that principle. – Systembolaget Jul 28 '12 at 17:34
  • 1
    Your Fiddle, and me now trying to recreate mine in Fiddle made clear what the problem is. Although all my elements fit fine, they don't fit in the order they're in. Masonry does some shuffling but not enough to always make it work. Isotope seems to do no shuffling to make things fit better, there is the shuffle option (which does sortBy: 'random') however this is truly random and not an order which necessarily fits better. Here my [Fiddle](http://jsfiddle.net/fM5N5/), just a copy from what comes from my site.If I do some shuffling by hand Masonry can make it fit. – Berggeit Jul 28 '12 at 20:20
  • Exactly, due to the "width column blocking issue", Isotope's shuffle method can - accidentally - result in a snug fit, as it happens when you try "toggle variable sizes" on the plugin homepage. There is, to my knowledge, no logic that can always achieve a snug fit with variable elements in Isotope. – Systembolaget Jul 28 '12 at 20:51
  • I have also added a fiddle outlying the problems.. http://jsfiddle.net/danwhitmarsh/zgjBy/ move the javascript pane and see how the elements dont move to the correct place – Dan Oct 09 '13 at 07:39
2

To expand on Dan's answer, having just had this problem myself, it seems that Packery is a more up to date; much more maintained version of Masonry - from the same author. It's not clear to me why both projects exist as separate entities, with only typos fixed in the latter.

The good news is - it's almost totally a drop-in replacement. The only change I had to make (other than names masonry->packery where used) was to remove an option, because it is the default and only option in Packery.

That was isFitWidth: true, my feeble attempt to make Masonry pack things something close to how nicely Packery does without any options at all.

Another nice change with Packery is that gutter: x applies to vertical as well as horizontal gutters. In Masonry, this was horizontal only - though trivial with margin-bottom in CSS, this felt like a needless hack.

OJFord
  • 10,522
  • 8
  • 64
  • 98