angular-masonry

angular-masonry copied to clipboard

Looking to make preserve-order AND imagesloaded work together. So imagesloaded is used, but it waits for the previous images to be loaded in order before displaying (with a timeout option per load).

I found one solution to this general problem with masonry and angular that seems to work for me but is very situational.

If your images all have the same aspect ratio then you can use:

.image{ background-size: contain; background-repeat: no-repeat; width: 100%; height: 0; padding-top: 46.73%; } padding top is the aspect ratio in percent of your image. (width/height*100).

on the div that should normally contain the image, and set the backround image url dynamically.

@elgubbo for this "solution", you don't need imagesloaded

@elgubbo Thank you for this solution. I was stuck on this the whole evening and I am glad I saw your post. The good old css to the rescue. Inspired by you, I now have the following set-up:

CSS:

.image_aspect_ratio {
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  position: relative;
}
.image_aspect_ratio > img {
  position: absolute;
}

HTML:

<div class="image_aspect_ratio">
   <img ng-src="" />
</div>

I calculated the aspect ratio percentage with this formula:

Height / (width / 100)

@JohnnyTheTank You are right. I dont need the imagesloaded with the above solution.

I am glad it works now!