masonry items collapse when opening webpage for the first time

Question

everybody!

I'm working on my personal website - an on-line portfolio. This is the first website I'm writing from scratch, so I'm new to HTML, CSS, JavaScript and PHP. In fact my knowledge of JavaScript and PHP is basic, so I'm using ready-to-use solutions. One of the solutions I use is Mansonry grid layout library, but unfortunately it doesn't work as I want it to. The problem is, when I open the webpage for the first time, all images collapse. When I renew the page, the images are aligned properly. I am wondering, how to fix it?

I'm using Masonry for the layout of project pages (http://vprilenska.netai.net/design_rigams.php). I want the library items to be aligned in four rows. Each library item is a div with an image and text. Divs are floated to the right.

<div class="item img">  
    <a href="image1.jpg">
        <img src="image1.jpg"/>
        <p>caption</p>
    </a>
</div>

All images are of different height. Image width depends on column width. Column width and gutter are sized with elements, which, in turn, are set in percents of browser window width.

CSS for image size:

.item img {
    max-width: 100%;
    height: auto;
}

HTML and CSS for column width and gutter sizing elements:

<div class="col_width"></div>   
<div class="gut_width"></div>

.col_width, .item {
    width: 22.5%;
}

.gut_width {
    width: 2%;
}

Masonry script, located between the closing body and html tags:

<script src='masonry.js'></script>
<script>
    var container = document.querySelector('#masonry');
    var masonry = new Masonry(container, {
        gutter: container.querySelector('.gut_width'),
        itemSelector: '.item',
        columnWidth: container.querySelector('.col_width')
    });
</script>

I think the problem is in the fact, that image height is not fixed. But maybe it's the fault of the total webpage layout.

Bill · Accepted Answer · 2014-08-14T17:56:25.203

3

Your problem is that the images aren't loaded (and therefore have no dimensions) when you execute the Masonry positioning. The reason it works when you reload is because the images are cached.

Try executing when everything has loaded. I would suggest hiding everything until that point, but that's outside the scope of this question.

<script>
    function masonry_init(){
        var container = document.querySelector('#masonry');
        var masonry = new Masonry(container, {
            gutter: container.querySelector('.gut_width'),
            itemSelector: '.item',
            columnWidth: container.querySelector('.col_width')
        });
    }
    window.onload = masonry_init;
</script>

Sources:

I have had this problem myself! :)

Also, MDN - GlobalEventHandlers.onload

edited Aug 14 '14 at 17:56

answered Aug 14 '14 at 15:50

Bill

3,382
20
41

Thank you for the answer, but, I'm afraid the solution is not working. Items still collapse when I open the webpage for the first time in Firefox. In Chrome they remain collapsed even after I renew the webpage. – victoria Aug 14 '14 at 16:02
I'm sorry to hear that. Maybe it has been implemented incorrectly or there is more to your issue than the images not being loaded yet.. Although I'm pretty sure that is the issue. – Bill Aug 14 '14 at 16:13
I copied your script and inserted it in the bottom of my html, after the images. But, maybe the problem is in the sticky footer solution I use. I use the following pure css solution: html { position: relative; min-height: 100%; } body { margin: 0 0 100px; /* bottom = footer height */ } footer { position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; } Maybe it's incompatible with Masonry? – victoria Aug 14 '14 at 16:42
Doh! I think it may have been a typo on my part! Try it without the brackets on the function reference. I have updated my answer. Sorry about that. – Bill Aug 14 '14 at 17:02
@user3127499 solution? Thanks! :) – Bill Aug 14 '14 at 18:02
No problem @victoria if it all worked correctly please mark my answer as correct by clicking the tick outline! Thanks! – Bill Aug 14 '14 at 18:03
One more question. Where do I need to include the script? In the beginning of the document or at the end? In the example on the webpage you provided a link to, it is in the head of the document. – victoria Aug 14 '14 at 18:11
Considering you are running your code in the window.onload event, in other words after everything else has finished loading, it doesn't matter. – Bill Aug 14 '14 at 18:16
By the way, there is something going wrong with your scripts and other head elements as they are being printed outside of the head. – Bill Aug 14 '14 at 18:19
I included Masonry script at the end of my html. All other scripts should be inside the head. Hm, what do you mean by being printed outside? – victoria Aug 14 '14 at 18:25
The only thing is your must put the script that relies on Masonry after the masonry script. Take a look at your head in Chrome's inspector. (If you don't know what that is, Google it now, it is *the* most important tool for web development). – Bill Aug 14 '14 at 18:35

masonry items collapse when opening webpage for the first time

1 Answers1