kombai / freewall

Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
MIT License
1.85k stars 375 forks source link

Grid not rendering until browser resize! #208

Closed m3xx closed 8 years ago

m3xx commented 8 years ago

I have an issue. The grid does not render properly until I resize the browser.

screens

http://imgur.com/yGYBiGl

http://imgur.com/MGMklqb

my html

<div class="gallery">
                <a href="img/gallery/1.jpg"><img src="img/gallery/1.jpg" alt="Alt"></a>
                <a href="img/gallery/2.jpg"><img src="img/gallery/2.jpg" alt="Alt"></a>
                <a href="img/gallery/3.jpg"><img src="img/gallery/3.jpg" alt="Alt"></a>
                <a href="img/gallery/4.jpg"><img src="img/gallery/4.jpg" alt="Alt"></a>
                <a href="img/gallery/5.jpg"><img src="img/gallery/5.jpg" alt="Alt"></a>
                <a href="img/gallery/6.jpg"><img src="img/gallery/6.jpg" alt="Alt"></a>
                <a href="img/gallery/7.jpg"><img src="img/gallery/7.jpg" alt="Alt"></a>
                <a href="img/gallery/8.jpg"><img src="img/gallery/8.jpg" alt="Alt"></a>
                <a href="img/gallery/9.jpg"><img src="img/gallery/9.jpg" alt="Alt"></a>
                <a href="img/gallery/10.jpg"><img src="img/gallery/10.jpg" alt="Alt"></a>
            </div>`

my sass


.gallery
    position: relative
    width: 100%
    height: 100%
    a
        overflow: hidden
        display: block
        width: 320px
        img
            display: block
            max-width: 100%`

my js


$(function() {
    var wall = new freewall(".gallery");
    wall.reset({
        selector: 'a',
        animate: true,
        cellW: 120,
        cellH: 'auto',
        gutterY: 25,
        fixSize: 0,
        onResize: function() {
            wall.refresh();
        }
    });

    wall.container.find('a img').load(function() {
        wall.fitWidth();
    });
});
PhantomRay commented 8 years ago

You can do wall.refresh() after all images being loaded. Sample code below. You may want to change it a little bit.

var images = $(html).find('img');
var length = images.length;
images.load(checkImageStatus);
images.error(checkImageStatus);

wall.appendBlock(html);

function checkImageStatus() {
    --length;
    if (!length) {
        setTimeout(function () {
            wall.refresh();
        }, 505);
    }
}
kombai commented 8 years ago

@dragonfish-au Thank you.