CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-masonry
justincys
justincys

Reputation: 3

Blocks not aligned in Masonry with jQuery

I'm a student learning how to code.

I have problems with trying to align my blocks using the Masonry plugin.

I'm trying to make it such that the height and width of each block (.item) is the same, but I'm not sure how to do it properly since I'm using percentages. If it was a more fixed value such as pixels, it'd be easier.

I'm using jQuery 1.9.1, Masonry by David DeSandro, the CSS resets on meyerweb.

The HTML:

<body>
    <div class="wrapper">
        <div class="gridSizer"></div>
        <!-- FIRST ROW -->
        <section class="item" style="background:limeGreen">Everything is 125px in height and width</section>
        <section class="item" style="background:green">&nbsp;</section>
        <section class="item" style="background:olive">&nbsp;</section>
        <section class="item h2" style="background:lime">Only this block is 250px in height (.h2 class), but the aqua coloured box is not being pushed down.</section>
        <!-- SECOND ROW -->
        <section class="item" style="background:blue">&nbsp;</section>
        <section class="item" style="background:navy">&nbsp;</section>
        <section class="item" style="background:teal">&nbsp;</section>
        <section class="item" style="background:aqua">&nbsp;</section>
        <!-- THIRD ROW -->
        <section class="item" style="background:magenta">&nbsp;</section>
        <section class="item w2 h2" style="background:hotPink">This block is 250px in height and width (.w2 and .h2 classes)</section>
        <section class="item" style="background:deepPink">&nbsp;</section>
        <section class="item w2" style="background:lightCoral">If the width is increased (.w2 class), elements are still pushed</section>
        <section class="item">No background color assigned to this block</section>
        <section class="item" style="background:violet">&nbsp;</section>
    </div>
</body>

The CSS:

html, body {
    min-height: 100%;
}
.wrapper {
    position: relative;
    margin: 0 auto;
    width: 500px;
}
.wrapper:after { /*clearfix*/
    content:' ';
    display: block;
    clear: both;
}
/*
 * MASONRY STUFF
 */
 .gridSizer {
    width: 25%;
}
.item {
    width: 25%;
    min-height: 125px;
}
.item.w2 {
    width: 50%;
}

The JavaScript/jQuery:

var $container = $('.wrapper');

$container.masonry({
    columnWidth: '.gridSizer',
    itemSelector: '.item'
});
$('.item').css('height', $('.item').width());
$('.item.h2').css('height', $('.item').width() * 2);

Here's a jsfiddle with my problem: http://jsfiddle.net/em5cU/

Would appreciate any help I can get. Thanks!

Upvotes: 0

Views: 1925

Answers (1)

edsioufi
edsioufi

Reputation: 8335

You should initialize masonry after all elements are sized.

Change your JavaScript to:

var $container = $('.wrapper');

//these should come before call to masonry()
$('.item').css('height', $('.item').width());
$('.item.h2').css('height', $('.item').width() * 2);

$container.masonry({
    columnWidth: '.gridSizer',
    itemSelector: '.item'
});

See demo.

Upvotes: 2

Related Questions