1

我正在使用同位素控件放大卡片并重新布局集合。我还想在每个图块放大时显示不同的内容 - 每个放大的图块都会显示不同的图形/内容。我使用的当前示例仅将类（大）与磁贴相关联，但我希望它也显示不同的内容。感谢任何帮助。谢谢。

JSFiddle：http: //jsfiddle.net/DsnNX/

  $(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();
  });
});
4

1 回答 1

4

既然您可以毫无困难地将 HTML 内容放入同位素瓦片中，为什么不简单地将内容一直放在.item元素中display: none，然后在.large（活动/点击）类存在时显示它们？

这是一个 JSFiddle，演示了一个非常简单的实现。

本质上，我只是将数字包装在span标签中，以便它们可以使用 CSS 定位，并在每个块中添加一个隐藏的内容 div，其显示是基于具有该类的父.item元素切换的。.large

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

于 2013-11-13T20:10:19.083 回答