jQuery masonry with percentage width

Question

is there a way to get jquery masonry working with percentage width divs? I'm trying to create a fluid layout with 25%, 50%, 75% and 100% widths. But as soon as i set the widths with % the automatic resizing stops working, and if I try to manually trigger mason onresize I get rounding errors that makes the divs jump around. Also it becomes quite buggy that it sometimes ignores the height, and sometimes just stops placing the divs and put them all on 0,0

HTML markup:

    <div class="boxes">
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-2">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-3">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

CSS properties:

.weight-1 {
width:25%;
}

.weight-2 {
width:50%;
}

.weight-3 {
width:75%;
}

.weight-4 {
width:100%;
}

Muchos gracias for any input, J

So you listed html and css, but you never included the masonry js code to make this happen ? — BentOnCoding, May 23 '12 at 18:25

Benn · Answer 1 · 2015-02-08T13:51:33.500

12

forget the .wight stuff add only this in css

    .box {
      width: 25%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

masonry js

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

    container.imagesLoaded(function(){  
        container.masonry({
           itemSelector: '.box',
           columnWidth: function( containerWidth ) {
              return containerWidth /4;// depends how many boxes per row
            }(), // () to execute the anonymous function right away and use its result
            isAnimated: true
        });
    });
});

change holder div to

 <div id="boxes" class="masonry clearfix">

and boxes to

<div class="box">...</div>

( note that Firefox might cause bit issue with exact divider of 100 like 25% so set the boxes at 24.9 or 24% )outdated.

Use box-sizing to avoid drooping column issue.

edited Feb 08 '15 at 13:51

answered Jun 12 '12 at 02:55

Benn

4,109
7
53
99

Doesn't work. divs just pile on top of one another. http://jsfiddle.net/GhtbT/ P.S.: in all of Firefox, Chrome, Opera. – Fabien Snauwaert May 06 '14 at 14:55
I'll answer my own comment: the function that calculates the columnWidth should be called right away using () after its definition. See updated jsFiddle here: http://jsfiddle.net/GhtbT/1/ The layout now works fine. – Fabien Snauwaert May 06 '14 at 15:10
`columnWidth` option has been updated in recent version to use an element or a selector, which works great in % based grids – H Dog Sep 01 '15 at 21:05

score 8 · Answer 2 · answered May 15 '13 at 21:35

8

i have same problem, try, try, and try, and this work for me.

.masonry-brick {
   width:25%;/*or others percents*/

   /*following properties, fix problem*/
   margin-left:-1px;
   transform:translateX(1px);
}

answered May 15 '13 at 21:35

Darlan Mendonça

443
5
9

This properties yes fix problems! Thank you very much! I only added proprietary prefixes to transform. Any reason not to add them? – frnhr Sep 22 '13 at 17:02
1

Additional hint : do not use this property with columnWidth property when calling masonry constructor – Mr Washington May 07 '15 at 15:50
@frnhr, yes, you need add browser prefix to transform property (if you dont use a post-css with this feature). – Darlan Mendonça Oct 15 '15 at 04:05

score 1 · Answer 3 · edited Mar 29 '15 at 12:25

I had the same problem … solved it with css calc option. That works fine, but not on resizing the windows, then it gets a bit mad …

@media screen and (min-width:1020px){.brick { width: calc((100% - 40px) / 5); }}

@media screen and (min-width:800px) and (max-width:1019px){.brick { width: calc((100% - 30px) / 4); }}

@media screen and (max-width:799px){.brick { width: calc((100% - 10px) / 2); }}

score 0 · Answer 4 · answered Jul 11 '13 at 04:10

0

If you want 25% width not 24.9% add margin-left:-1px!important; to your box

answered Jul 11 '13 at 04:10

Paul Kowalik

11
2

jQuery masonry with percentage width

4 Answers4

Linked