Rectangle 27 0

Your mixing masonry and isotope. You are loading initially with masonry and then you call isotope with infinitescroll like this:

Thanks for the reply @Macsupport. Unfortunately I have already tried this to the same end. In fact, you can see in the commented lines below the call to $container.isotope() where I already tried that. When I comment out the line: $container.isotope( 'appended', $newElems ); and uncomment the line: $container.masonry( 'appended', $newElems, true ); I am still getting the same result.

They can not be used interchangeably. You have masonry.js on your site so you need to use that, not isotope calls. Plus, you have other code loaded, masonry-isotope.js, which needs to be loaded after masonry, not before. You need to show more code. Make a jsfiddle.

Forget that I even used the call to isotope(). Originally that was never even part of my code. Like I said, it does not work at all even when using $container.masonry() instead of $container.isotope(); I will make a fiddle when I have time but I wouldnt think that is the issue here. Also, that is all of my code. What more code do you need? HTML? I also linked to the page online where I am having the problem. all the code is there too. Thanks for your help.

javascript - Masonry Infinite Scroll overlapping divs - Stack Overflow

javascript jquery wordpress infinite-scroll masonry
Rectangle 27 0

I've experienced the same problem and I developed 2 methods to combat it. First off reload the container after you have appended the onclick-image.

1. container.masonry('reload');

Second, and probably more important, dynamically correct the height of the surrounding div to match the height of the image:

2. // bricks correct height
   var brick = $("#marker #container .brick"); 
   brick.each(function() {
          var content = $(this).find(">div");
          var img = $(this).find("img");
           content.css({
            height: img.attr("height")
           });
        });
<div style="height: 284px; position: static; top: -133px;" class="test">  
       <a class="arrow" href="#" target="_self"><img class="img" src="test.jpg" width="374" height="284"></a>
  </div>

Edit: In your code you have the same problem, there is no height in the style.

<div style="position: absolute; left: 330px; top: 280px;" class="box item 3d">

And it seems to me you have a problem with the width, too. I think you need to use a smaller width for the column. A good value would be the width of the small image and some border.

mm that makes sense and it is promising, thanks. Will have a try and reply back

This is only a valid solution if you already have image dimensions defined. If so, the box model will take care of any overlapping. Setting height/width explicitly is superfluous.

javascript - Masonry images overlapping issue - Stack Overflow

javascript jquery jquery-masonry
Rectangle 27 0

$('#container').append(data);
$container.imagesLoaded( function() {
            $container.masonry('reloadItems').masonry();
        });

javascript - Masonry items overlapping when containing images - Stack ...

javascript jquery jquery-masonry
Rectangle 27 0

Here the solution I found. As I said I changed the "Lazy Load" for pagination and I wrote the code below thanks to some users that shared their solutions in this Forum.

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

// grid
var $boxes = $('.box');
$boxes.hide();

var $container = $('#boxes');
$container.imagesLoaded( function() {
$boxes.fadeIn();

$('#boxes').masonry({
    itemSelector: '.box',
    columnWidth: 286,
    gutterWidth: 40
});
});

var $container = $('#related');
$container.imagesLoaded( function() {
$('#related').masonry({
    itemSelector: '.box',
    columnWidth: 286,
    gutterWidth: 40
});
});

});
</script>

javascript - Masonry Overlapping (Imbalance2 Bug) - Stack Overflow

javascript jquery wordpress masonry
Rectangle 27 0

jQuery(function(){
   var $container = $('#container');
   $container.imagesLoaded( function () {
       itemSelector: '.box',
       animate: true
   });
  });

javascript - Masonry images overlapping issue - Stack Overflow

javascript jquery jquery-masonry
Rectangle 27 0

For anyone running into a similar problem, I figured it out with some help from these answers. As a bonus, this helps me with refreshing after using Angular filters to modify which bricks are shown (the second linked answer deals with this).

Here's my working code, which I trigger when my async data has loaded on pageload, and also anytime the data is filtered or resorted:

function refresh() {
    // We need to give Masonry a little jump-start, otherwise the bricks
    // will render in one big overlapped stack sometimes
    common.$timeout(function () { $scope.$broadcast('masonry.reload'); }, 100);
}

Without $timeout, it looks (to my poorly-trained eyes) like the reload message is being consumed before the digest cycle completes, so the filtering or sorting may not have already taken place. I'm not sure that this is the best solution, but it seems to work in my testing so far. If anyone has a better one, I'd love to see it.

javascript - How to fix overlapping bricks with Angular + Masonry? - S...

javascript jquery angularjs
Rectangle 27 0

I kept running into issues with Passy's directive. Perhaps it was due to the number of bricks I was loading or my styling but I kept getting a lot of sporadic overlaps, delayed reloading of bricks and so on.

I switched to klederson's angular-masonry-directive and have been extremely happy with the decision; no problems so far. I haven't benchmarked to confirm but it seemed to have sped up load time too.

A very simple and 100% compatible masonry directive for AngularJS ... do you know how to use masonry? Good! You know how to use this.

This directive is meant for the raw masonry lib and not the jQuery one.

Thanks for the heads up. I'll check this one out for sure.

I was having the same issue! This not only solved the issue but also is faster! Thanks a lot!

javascript - How to fix overlapping bricks with Angular + Masonry? - S...

javascript jquery angularjs
Rectangle 27 0

I've encountered this same bug before when working with Masonry. The solution that worked for me - though a bit ugly - was to call masonry a second time, after it's completely loaded.

Try adding this inside the ready handler, but below your masonry call:

setTimeout(function(){ $container.masonry() }, 200);

javascript - Masonry overlapping at first - Stack Overflow

javascript jquery jquery-masonry
Rectangle 27 0

On this line, try triggering layout once items are appended:

$('#news').masonry( 'appended', elems, true ).masonry('layout');

I've seen examples with and without the extra .masonry() call, but it might work.

javascript - Masonry why arranging in single column overlapping - Stac...

javascript jquery jquery-masonry masonry
Rectangle 27 0

This tweak is a fix on chrome and safari browser.

jQuery("img").load(function() { jQuery(".container_class").masonry(); //this tweak is a fix on chrome and safari browser });

Hello Dharmik: Thanks so much for your answer! However I don't how to add this line (I'm a beginner in js). If I put it before "var $boxes = $('.box');" Masonry doesn't work. Maybe I have to add this line instead "imagesLoaded"? Could you please help me with this? Thanks in advance!

javascript - Masonry Overlapping (Imbalance2 Bug) - Stack Overflow

javascript jquery wordpress masonry