Question

我正在使用同位素控制放大卡片并重新开始收集。我还希望在每个图块被放大时显示不同的内容 - 每个放大的图块将显示不同的图形/内容。我使用的当前示例仅将类（大）与tile相关联，但我希望它也显示不同的内容。感谢任何帮助。感谢。

  $(function(){
  var $container = $('#container'),
  $items = $('.item');

  $container.isotope({
    itemSelector: '.item',
    layoutMode : 'fitColumns',
    resizesContainer : false,
    getSortData : {
      fitOrder : function( $item ) {
        var order,
            index = $item.index();

        if ( $item.hasClass('large') && index % 2 ) {
          order = index + 1.5;
        } else {
          order = index;
        }
        return order;
      }
    },
    sortBy : 'fitOrder'
  });

  $items.click(function(){
    var $this = $(this);
    // nothing to change if this already has large class
    if ( $this.hasClass('large') ) {
      return;
    }
    var $previousLargeItem = $items.filter('.large');

    $previousLargeItem.removeClass('large');
    $this.addClass('large');
    $container
      // update sort data on changed items
      .isotope('updateSortData', $this )
      .isotope('updateSortData', $previousLargeItem )
      // trigger layout and sort
      .isotope();
  });
});

Answer 1

由于您可以毫不费力地将HTML内容放入同位素图块中，为什么不在.item display: none元素内部随时将内容放在那里，然后在{{.large时显示它们。 1}}（活动/点击）类是否存在？

Here is a JSFiddle 演示了非常简单的实现。

基本上我只是将数字包装在span标签中，以便可以使用CSS进行定位，并在每个块中添加一个隐藏的内容div，其显示根据具有{{的父.item元素进行切换1}} class。

同位素还有一个.large选项，允许您指定每次触发布局/重新布局时调用的函数（例如，在您的情况下选择元素的任何时候）类似回调 - 您还可以使用它来管理活动元素上的更改内容，甚至只是通过示例中已有的JS onLayout事件处理函数动态更新内容。

使用同位素为每个放大的图块显示不同的内容

1 个答案: