2

Jqueryアイソトープを使用しています

他の div よりも幅の広い項目が 1 つあります。すべてのアイテムが適切に配置されていますが、幅の広い要素の下でアイテムが正しく配置されていません。

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オプションの機能です。アイテムは、配置されるアイテムのサイズに関係なく、上下に縦に並べられます。

利用可能なレイアウト オプションと、さまざまなサイズのアイテムでどのように表示されるかをよりよく理解するには、このWorking Exampleを確認してください。

試してみたいと思うかもしれません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 に答える