Masonry & Picturefill

[LostKobrakai]

Hi there,

I'm currently doing some updating to my portfolio site for my photographs. Now I wanted to implement a masonry layout, but sadly this doesn't work well with the library mixture I've got there. 

I want to use picturefill.js to get better loading times from the start. I'm not using the fancy stuff, only srcset and src for lowres fallback. Now masonry.js does require imagesLoaded.js for triggering after the images are loaded, but the latter doesn't do well with srcset by now. masonry.js could calc it's grid from the width/height attribute of the image, but I need a anchor wrapper around them for the lightbox markup, so this doesn't do it as well.

So my question is: Does anybody know a masonry library, which I can feed raw size-ratios or imagesizes to calculate from? Something like this:

<a … data-width="1500" data-height="1000">
  <img src="lowres-300-200.jpg" 
       srcset="…, highres-1500-1000.jpg 1500w" 
       width="1500" 
       height="1000" />
</a>

Slightly off topic: Just now I would sign any html spec, which includes the addition of every element being able to behave as link with the href attribute. It's kinda nice idea actually.

Update: --------------

The img width/height attribute does affect the link if it's not set as display: inline, but somehow the calculation does take quite some time, because of the images not being shown at 100% ( http://jsbin.com/gihapimifa/2/edit?js,console,output ). That's why the inital calculation of the masonry.js is so wrong. 

I think for now I'll stick with doing the layout on every images load event. Maybe I'll find something to tell me, when the css calculation, based on the attributes is done, rather than waiting for the image to be loaded.

[ai_slop]

Hello @LostKobrakai, did you ever get a masonry layout working with ProcessWire srcset images in the end? Building a portfolio site and scoping out some ideas. It looks like the new CSS spec for masonry layouts - or "css grid-lanes" will be a thing but it's not ready yet. 

EDIT: Just realised the OP posted in 2014 lol.

In any case, readers might find this of interest: https://metafizzy.co/blog/imagesloaded-v5-released/

I may see if I can get it to work

Edited yesterday at 01:51 AM by ai_slop