动态加载的砖石图像重叠 [英] Dynamically loaded Masonry images are overlapping

问题描述

我使用jQuery插件Masonry在我的网站上加载图像，但大部分时间，他们很多是重叠的。我发现这是一个流行的问题与插件，并尝试了各种解决方案，但仍然没有得到它的正常工作。

 
 code>< div id =containerclass =js-masonrydata-masonry-options ='{itemSelector：.item}'> 
 {％for blog.articles％} 
< div class =blog-article {％if forloop.first％} first {％endif％} {％if forloop.last％} last {％endif％} item> 
< a href ={{article.url}}> {{article.content}}< / a> 
< / div> 
 {％endfor％} 
< / div> 
  

JS

  $（window）.load（function（）{
 var $ container = $（'＃container'）; 
 $ container.imagesLoaded {
 $ container.masonry（{
 itemSelector：'.item'，
 isAnimated：true，
}）; 
}）; 
}） ; 
  

CSS

  #container {
 position：relative; 
} 
 
 .item {
 margin：10px; 
 width：25％; 
} 
  

EDIT

解决方案

jQuery上面用这个修正了问题：

  $（window）.load（function（）{
 var $ container = $（'＃container'）。masonry（）; 
 // layout所有图片加载后再次Masonry 
 $ container.imagesLoaded（function（）{
 $ container.masonry ）; 
}）; 
}）; 
  

I'm using the jQuery plugin Masonry to load images on my site, but the majority of the time a lot of them are overlapping. I have found this to be a popular problem with the plugin and have tried various solutions, but still haven't gotten it working properly. This is what I have so far.

HTML

<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item" }'>
  {% for article in blog.articles %}
    <div class="blog-article{% if forloop.first %} first{% endif %}{% if forloop.last %} last{% endif %} item">
      <a href="{{ article.url }}">{{ article.content }}</a>
    </div>
  {% endfor %}
</div>

JS

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

CSS

#container {
  position: relative;
}

.item {
   margin: 10px;
   width: 25%; 
}

EDIT

解决方案

Replacing the jQuery above with this fixed the problem:

$(window).load(function(){
  var $container = $('#container').masonry();
  // layout Masonry again after all images have loaded
  $container.imagesLoaded( function() {
    $container.masonry();
  });
});

这篇关于动态加载的砖石图像重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！