I am using two jquery scripts. 

1. lazyload

 2. jquery.masonry.min.js

Lazy load does the loading of images as one scrolls the page and masonry positions the images so they fit into available spaces.

The problem is lazy loads the page with holding images first. Then the masonry script positions them. That all works fine as the holding image is one height.

As one scrolls the page and the actual images (all different heights) are downloaded the masonry script does not re organize them relative to the new heights and the result is they are all overlapped.

the two scripts functions are below. 

I just wonder if there is a clever solution to this. I don't know and cannot know the heights of the images as they are from users on my site. I was thinking maybe a page refresh on page scroll might force masonry script to re position the new images.

I haven't a clue if there would be a solution to this as I am new to jquery.

Thanks for any help.

Richard

1. <script type="text/javascript" charset="utf-8">
   	$(function() {
   	$("img").lazyload();
   	});
   	</script>

2.   <script type="text/javascript">
3.   $(function(){
4. 
   
5.     var $container = $('#container');
6.   
7.     $container.imagesLoaded( function(){
8.       $container.masonry({
9.         itemSelector : '.box',
10.         isAnimated: true
11.       });
12.     });
13.   
14.   });
15. </script>
16.