Strange allocation for articles

[indikatordesign]

I use a 3 column setup for test purposes. It's for rendering a WordPress Blogroll. I use Colcade together with imageLoaded, but the articles are unevenly distributed.

Anyone with an idea to fix this?

Also note, that the article in the third column has not an image. It's just a quote with it's excerpt. So it seems to have nothing to do with the pictures.

[desandro]

It appears that the unloaded images, plus a really big article without an image, are throwing off the layout. Bummer 😢 as Colcade was made to avoid the problem with images.

One solution is to use imagesLoaded to relayout items after all images have been loaded.

$grid.colcade();
$grid.imagesLoaded( function() {
  $grid.colcade();
});

If you have a live URL I can take a look.

[elithecho]

calling grid.colcade() after imagesLoaded makes the page jump back on top.
Any solution for this?

[ca-miked]

Hi Desandro, thank you for all your work on the masonry, colcade and isotope libraries. They have been SO useful in my travels.

I generally am getting my images/data from an api where I know the native dimensions of the images up front. With the native image dimensions data you can simply add a placeholder element with the appropriate padding-top percentage value inlined.

The padding can be calculated from the width and image aspect ratio to act as an accurate "sizer" element. (es6 react example below)

<style>
.media-placeholder {
    display: block;
    width: 100%;
    position: relative;
}
</style>

const image = { url:'http://foo/bar.jpg', width:1280, height:960 } ;
let AR = image.height / image.width;
if(AR < 0) 
    AR = image.width / image.height;

placeholder = <div className="media-placeholder" style={{ paddingTop: (AR * 100)+"%" }}></div>;

Then you can just place your image (and anything else in there) over the top of the placeholder absolutely positioned. This approach will work nicely with responsive layouts.

If you don't have access to the image dimensions when laying out your grid then unfortunately you will need to resort to using imagesLoaded().

Hopefully this is helpful to someone.

Cheers!

[MattAppleton]

Hello — many thanks for your scripts Desandro... I think I am running into the same problem on this page: https://sandbox.modernactivity.com/GA2018Fullpage/projects

Sometimes it loads with everything in one column in IE11

What would the best way to implement 'imagesLoaded'??
I am trying like so, but I don't think this is right?

Loading it at the foot of my test 'projects' page as per link above

<script>

$grid.colcade();
$grid.imagesLoaded( function() {
  $grid.colcade();
});  

$('.grid').colcade({
  columns: '.grid-col',
  items: '.grid-item'
})

</script>

[zandergrin]

Hi Desandro - we're having the same issue with some strange layout decisions being made. NOt sure it's an image thing, because we have placeholders at the correct aspect ratio placeholders as the images lazyload.

I can also tell you that it only occurs when the browser is over a certain width - but there are no responsive declarations happening at the time colcade makes its decision

[Dylan-Wells-at-LION]

I'm having this same issue and I'm not using images, just cards filled with text.

[gjvanmastrigt]

I had the same issue that on certain widths some items were put in the wrong column. I fixed it by initialising Colcase when the DOM is ready.

[c-datculescu]

Hi all. Decided to chip in a little.

In my case i was using infinitescroll with colcade, and sometimes it worked ok sometimes not (some columns were too long).

I have managed to track this down to the offsetheight calculation of the item to be added. Sometimes i would be getting the same value (74 in my case), which was the height of text without image (always). I am a noob in js, but what i figured so far is that at the moment of injecting and placing the element, the size is not yet fully calculated (i am using placeholders for images because some are quite large, and these placeholders are svg's which are memory generated). Unfortunately even these ones take a little time.

What fixed my issue is adding a very small timeout (in my case seems to work reliably with 1-5 ms timeouts) which allows the browser to finally have the actual height of the element to be placed.

The timeout is between receiving the new set of elements and appending them to colcade.

Works like a charm now.

PS: the elements that are loaded initially seem to work reliably if colcade is triggered on DOMContentLoaded. The above fix is only for dynamic elements injected later.

Edited for clarity and additional details.