Question

我在网站上工作并使用fullpage.js，有两个部分，我添加了一个链接，根据点击的图库链接使用ajax打开第二部分的图库，所以内容发生了变化..我使用同位素进行图像布局，但问题是在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>

现在当我点击一个链接时，它应该调用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;
}

现在你初始化Isotope

$('.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调用项目后的同位素重叠

2 个答案: