2

我正在使用 Jquery Isotope

我有一个项目宽度大于其他 div。所有项目都很好地对齐，但项目在大宽度元素下没有正确对齐。

http://jsfiddle.net/S5vAG/1381/

<div id="container">
  <div class="item">1</div>
  <div class="item large">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

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

  $container.isotope({
    itemSelector: '.item',
    layoutMode : 'fitColumns',
    resizesContainer : true,
    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

3 回答 3

0

利用layoutMode : 'masonry',

小提琴链接：http: //jsfiddle.net/S5vAG/1382/

于 2013-08-16T11:27:58.883 回答
0

JQUERY ISOTOPE有属性

当有更多单元格时，它会自动采用第一个单元格的高度和宽度，并根据第一个单元格分配所有单元格

如果你想项目的宽度和高度大于其他 div。然后在这个项目上分配自定义样式并给出高度和宽度

我在http://jsfiddle.net/S5vAG/1381/看到你的 CSS 并在CSS中 设置代码

.item.large {
  width: 300px;
  background: #2D6;
    height:200px;
  z-index: 10;
}

像 HTML

<div id="container">
  <div class="item">1</div>
  <div class="item large" style="width:200px;height:300px">2</div><!-- you can use your desire width and height -->
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

在js中

 (function($) {
      var $container = $('#container');
$(window).load(function(){

            // add randomish size classes

$container.isotope({
  itemSelector : '.item',
  layoutMode : 'masonry',
  });
       $container.isotope("reLayout");
    });


})(jQuery);

然后它设置期望的高度和宽度，并像其他具有不同高度和宽度的项目一样设置

我已经在我的客户网站中设置了这个代码，你可以在这里看到

这是XYFACTORS的新主题

但是对于您的问题，您可以查看我的演示链接，我已在演示所有页面中应用此功能

于 2013-08-19T10:43:15.943 回答
0

基本上，它的行为方式是这样的，这就是fitColumns选项的作用；无论被排列的项目的大小如何，这些项目都排列在一个在另一个之上的垂直列中。

要更好地了解可用的布局选项以及它们在不同大小的项目上的外观，请查看此工作示例。

听起来您可能想尝试一下layoutMode: 'masonryHorizontal'。

工作示例使用masonryHorizontal

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

  $container.isotope({
    itemSelector: '.item',
    layoutMode : 'masonryHorizontal',   // Important Bit
    resizesContainer : true,
    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();
  });
});

请注意，在示例中，我更改了 的宽度.items.large，使其看起来均匀。

于 2013-08-20T22:37:12.637 回答