CODEWITHSUNDEEP
htmlajaxangularjsweb-deploymentjquery-masonry
Akshay
Akshay

Reputation: 131

Masonry view showing images one below another

I have used a Masonry view plugin but when the images load through the ajax call, they seem to be displayed one below another (like a list)

HTML

    <div id="masonryView" data-ng-repeat="image in images">
            <div class="item">
              <a target="_blank" href="">
                <img src="{{image.imageSourceURL}}" alt="" width="250">
              </a>
              <div class="desc">{image.description}</div>
            </div>
    </div>

Ajax

  $(window).load(function(){
    var $container = $('#masonryView').masonry();
    $container.imagesLoaded( function() {
    $container.masonry();
    });
  });

CSS

#masonryView {
 position: relative;
}

.item {
   margin: 10px;
   width: 100px; 
 }

Does there seem to be a problem that could explain why the images are displayed one below another?

Upvotes: 0

Views: 153

Answers (1)

Macsupport
Macsupport

Reputation: 5444

I'm not seeing any AJAX in your posted code labeled "AJAX" but you should call masonry in this way, by setting your itemSelector:

$(window).load(function(){
var $container = $('#masonryView').masonry();
$container.imagesLoaded( function() {
$container.masonry({itemSelector: '.item'});
});
});

Upvotes: 1

Related Questions