Question

几天前，我尝试将Isotope整合到我的网站中，并将其与Fancybox 2结合使用，以创建一个具有过滤/排序功能的漂亮画廊。由于许多页面包含大量图像，我更喜欢在完成加载后直接显示和附加每个图像，而不是在所有图像都已加载之前显示加载器。

为了达到这个目的，我到目前为止提出了这段代码：

    $( function() {
  // init isotope  
  var $container = $('.isotope_container').isotope({
    itemSelector: '.isotope_image',
    layoutMode: 'fitRows',
    transitionDuration: '0.7s'
  });

// reveal initial images
$container.isotopeImagesReveal($('#images_container').find('.isotope_image'));
});

$.fn.isotopeImagesReveal = function( $items ) {
  var iso = this.data('isotope');
 var itemSelector = iso.options.itemSelector;
  // hide by default
  $items.hide();
  // append to container
  this.append( $items );
  $items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents( itemSelector );
    // un-hide item
    $item.show();
    // isotope does its thing
    iso.appended( $item );
  });

  return this;
};

});

上面的代码已经在某种程度上影响了我的目标。它拉动＆＃39;图像最初出现在<div id='images_container'>中，并在图像加载完成后将项目附加到同位素上。然而问题是代码附加并按照它们完成加载的顺序显示图像 <（首先加载的图像在网格中变为＃1，然后是＃2等）。将sortby参数添加到同位素选项不起作用，因为在同位素启动时未加载图像。在用这种方式附加所有图像之后用同位素重新排序它们是可能的，但看起来非常混乱。

我想要实现的是按照<div id='images_container'> 中存在的顺序加载图像。按时间顺序说到原始文件的顺序就这么说了。因此，基本上开始加载图像1，显示并在加载后附加它。然后进入图像2，在加载后显示并附加等，直到所有图像都被处理完毕。

我认为解决方案是改变$.fn.isotopeImagesReveal函数以按时间顺序处理每个div项目，但我无法弄清楚如何。

更新：添加了当前代码的示例。 http://codepen.io/micksanders/pen/KwXmwO

Answer 1

首先，您需要在标记中添加排序字段。我为data-order="xxxx"类的所有元素添加了.isotope_image属性，如下所示：

<div class='isotope_image' data-order="1">
<p>1</p>
<img src='http://lorempixel.com/600/600/sports'>
</div>
...

然后您需要将该排序字段添加到同位素初始化代码中......需要getSortData和sortBy选项：

var $container = $('.isotope_container').isotope({
    itemSelector: '.isotope_image',
    layoutMode: 'fitRows',
    transitionDuration: '0.7s',
    getSortData: {
      order: "[data-order]"
    },
    sortBy: 'order'
  });

最后在imagesLoaded.progress()函数的末尾，使用iso.insert($item)代替iso.appended($item)。

这是完整的修改代码： http://codepen.io/BenStevens/pen/MYEmBb

Answer 2

$( function() {

  var $container = $('#container').isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 200  
    }
  });

  $('#load-images').click( function() {
    var $items = getItems();
    $container.isotopeImagesReveal( $items );
  });

});

$.fn.isotopeImagesReveal = function( $items ) {
  var iso = this.data('isotope');
  var itemSelector = iso.options.itemSelector;
  // hide by default
  $items.hide();
  // append to container
  this.append( $items );
  $items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents( itemSelector );
    // un-hide item
    $item.show();
    // isotope does its thing
    iso.appended( $item );
  });

  return this;
};

function randomInt( min, max ) {
  return Math.floor( Math.random() * max + min );
}

function getItem() {
  var width = randomInt( 150, 400 );
  var height = randomInt( 150, 250 );
  var item = '<div class="item">'+
    '<img src="http://lorempixel.com/' + 
      width + '/' + height + '/nature" /></div>';
  return item;
}

function getItems() {
  var items = '';
  for ( var i=0; i < 12; i++ ) {
    items += getItem();
  }
  // return jQuery object
  return $( items );
}

See reveal each image as they load

同位素：加载后附加每个图像（按时间顺序）

2 个答案: