ajax 通话项目后同位素重叠

Question

我正在网站上工作并使用 fullpage.js ，有两个部分，我添加了一个 link 以使用 ajax 打开一个画廊进入第二部分，具体取决于画廊 link 单击，所以内容改变了..我使用同位素进行图像布局，但问题是图像在 ajax 调用后重叠，即使我使用 $container.isotope( 'layout' );

index.php

<div class="section">
    <div class="slide">
      <a href="#" class="gallery-link" data-id="1"></a>
      <a href="#" class="gallery-link" data-id="2"></a>
      <a href="#" class="gallery-link" data-id="3"></a>
    </div>
    <div class="slide"></div>
    ...
</div>
<div class="section">
    <div class="ajax_content"></div>
</div>

现在当我点击 link 时，它应该调用 ajax 请求并从另一个页面获取数据 (ajax.php)

<?php foreach( $images as $image ): ?>
       <div class="item">
          <a class="fancylink" rel="sketch" href="<?php echo $image['url']; ?>">
             <img class="img-responsive" src="<?php echo $image['sizes']['large']; ?>"/>
          </a>
       </div>
<?php endforeach; ?>

点击调用方法是这样的

$('.slide').on('click','a',function(){

        var url = "ajax.php";
        var gid = $(this).data('id');
            $.ajax({
                 type : 'post',
                 url : url,
                 data : {
                     galleryid: gid
                 },
                 success : function( response ) {

                   $('.ajax_content').html('<div class="content" id="gallery-container">'
                   +'<div class="isotope">'+response+'</div></div>');

                   var $container = $('.isotope');

                   $container.isotope({
                         itemSelector: '.item',
                         masonry: {
                             columnWidth: 160,
                             isFitWidth: true
                         }
                   });

                   setTimeout(function(){
                        $container.isotope( 'layout' );
                   },100);

                       $.fn.fullpage.moveTo(3,0);
                   },

                       error: function( message ){
                            console.log(message);
                       }
                    });
                    return false;
 });

Answer 1

您需要使用 imagesloaded.js，它允许图像在同位素发射前全部加载。如果您使用同位素 v2（图像加载不包括在 v1.56 中），请下载脚本并将其添加到您的页面，然后像这样调用同位素：

 var $container = $('.isotope');
 $container.imagesLoaded( function() {
  $container.isotope({
      itemSelector: '.item',
      masonry: {
        columnWidth: 160,
        isFitWidth: true
    }
      });
});

Answer 2

如果您隐藏图像并在加载时逐步显示它们（单独）会怎么样

举个例子：

你的 HTML 会是这样的

<div class="grid">
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
</div>

然后使用 CSS

隐藏您的图片

.item img {
   display: none;
}

现在你初始化同位素

$('.grid').isotope({
    itemSelector: '.item',
    percentPosition: true,
});

最后在 imagesLoaded 插件的帮助下显示您的图像，因为它们像这样加载到您的页面中

$('.grid').imagesLoadedMB().progress( function(instance, imageObj) {
    $(imageObj.img).fadeIn(300);
    $('.grid').isotope('layout');
});

您可以在此处找到 imagesLoaded 插件：http://imagesloaded.desandro.com/
我个人也使用这个插件，可以直接使用（所以我不用担心这样的事情）https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020

ajax 通话项目后同位素重叠

isotope overlapping after call items with ajax

ajax

jquery

jquery-masonry

jquery-isotope

fullpage.js