CODEWITHSUNDEEP
javascriptjqueryjquery-masonry
Sebastian
Sebastian

Reputation: 3628

Masonry overlapping at first

When Masonry loads for the first time, the images overlap as you'll see in this JSFiddle.

Once the screen has been resized, it's fine. I also find it loads fine when I open it in a second window.

(On the JSFiddle, you'll have to copy and paste the link into another tab to replicate the problem.)

I presume this is something to do with the images not loading in time and Masonry calculating the wrong amount of space, but I've tried similar solutions in other questions to no avail.

Here's my code:

var fragments = [],
    $container = $('#container');
    // initialize the masonry instance
    $container.masonry({
        columnWidth: 1,
        itemSelector: '.item'
    });

$container.masonry('bindResize');

$('.feed').feeds({
    feeds: {
         asos_f_uk: 'http://www.comfyshoulderrest.com/scrape.php?id=1',
    },
    //max: 10,
    loadingTemplate: '<h3 class="feeds-loader text-muted" style="text-align: center;">Loading...</h3>',
    entryTemplate : 'entryTmpl',
    onComplete: function (entries) {
            $container.masonry('reloadItems').masonry();
    }

HTML:

<script type="text/html" id="entryTmpl">

<div class="item">
        <a href="<!=link!>">
            <div class="image"><img src="<!=title!>" style="width: 100%;"></div>
        </a>
        <div class="text">
            <ul class="list-inline">
                <li><span class="price text-warning"><strong>&pound;7.00</strong></span> <span class="text-muted"><strike>&pound;14.00</strike></span></li>
                <li class="text-muted"><strong><!=content!></strong></li>
            </ul>
        </div>
    </div>
</script>

<div id="container" class="feed">

Upvotes: 3

Views: 271

Answers (1)

Larz
Larz

Reputation: 1186

I've encountered this same bug before when working with Masonry. The solution that worked for me - though a bit ugly - was to call masonry a second time, after it's completely loaded.

Try adding this inside the ready handler, but below your masonry call:

setTimeout(function(){ $container.masonry() }, 200);

Upvotes: 2

Related Questions