jquery-isotope - 複数のビューでの JQuery 同位体表示の問題

Question

jquery isotope を使用して Web アプリを作成していますが、よくわからない奇妙な表示動作が見られます。このアプリの要点は、Web サービスからデータをダウンロードし、それをタイルベースモードとテーブルベースモードの 2 つのモードのいずれかでユーザーに表示することです。このコードは、データを個別の div に配置し、それぞれで isotope() を呼び出してから、ユーザーがクリックするいくつかのボタンに基づいてそれらを非表示または表示します。

ページのサイズを変更すると問題が発生します。そうすると、現在表示されていないビューが明らかにめちゃくちゃになります。私が jsfiddle で抽出した例をここで見ることができます:

http://jsfiddle.net/jQ3v3/

再現する手順：

jsfiddle ページに移動します
右上の「テーブルモード」をクリック。タイルがテーブルに置き換えられるはずです。
レンダリングされた出力を表示している jsfilddle ペインを移動するか、ブラウザのサイズを変更してください。
右上の「タイルモード」をクリック。タイルが再び表示されるはずですが、左から右へのフローではなく、すべてが重なり合っています。
jsfiddle またはブラウザーのサイズを再度変更します。タイルが適切な位置に移動します。
もう一度「テーブルモード」をクリック。テーブルの行が短すぎて、すべての行が表示されていないことがわかります。
ブラウザのサイズを変更すると、自動的に修正されます。

実際には、HTML 生成の多くを処理するためにアンダースコアテンプレートを使用してバックボーンを使用していますが、jsfiddle の例では、ハードコードされた html にすぎません。

同位体の複数のインスタンスを同時に実行することはできませんか?

コードは次のとおりです。

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <style>
         .isotope,
         .isotope .isotope-item {
           /* change duration value to whatever you like */
           -webkit-transition-duration: 0.5s;
              -moz-transition-duration: 0.5s;
               -ms-transition-duration: 0.5s;
                -o-transition-duration: 0.5s;
                   transition-duration: 0.5s;
         }

         .isotope {
           -webkit-transition-property: height, width;
              -moz-transition-property: height, width;
               -ms-transition-property: height, width;
                -o-transition-property: height, width;
                   transition-property: height, width;
         }

         .isotope .isotope-item {
           -webkit-transition-property: -webkit-transform, opacity;
              -moz-transition-property:    -moz-transform, opacity;
               -ms-transition-property:     -ms-transform, opacity;
                -o-transition-property:      -o-transform, opacity;
                   transition-property:         transform, opacity;
         }

         /**** disabling Isotope CSS3 transitions ****/

         .isotope.no-transition,
         .isotope.no-transition .isotope-item,
         .isotope .isotope-item.no-transition {
           -webkit-transition-duration: 0s;
              -moz-transition-duration: 0s;
               -ms-transition-duration: 0s;
                -o-transition-duration: 0s;
                   transition-duration: 0s;
         }
      </style>

      <style>
         div.controls {
            height: 150px;
            margin-top: 20px;
         }

         div.content {
            margin-left: 180px;
            min-height: 500px;
         }

         div.tile {
            width: 175px;
            margin: 0px 10px 10px 0px;
            height: 100px;
            background-color: gray;
            position: relative;
            padding: 10px;
         }

         .headerRow {
            display: inline-block;
            background-color: #f3f3f3;
            border-bottom: solid orange 1px;
            font-size: 12pt;
            padding: 8px;
         }

         .tableRow {
            font-size: 12pt;
            background-color: white;
            padding: 10px;
            border-bottom: solid #cfcfcf 1px;
            cursor: pointer;
         }

         .headerCol, .dataCol {
            display: inline-block;
            cursor: pointer;
         }

         .titleCol {
            width: 250px;
         }

         .dateCol {
            width: 150px;
         }

         .btnTileView, .btnTableView {
            float: right;
            cursor: pointer;
            text-decoration: underline;
            margin-right: 20px;
         }

      </style>
   </head>
   <body>
      <div>
         <div class="controls">
            <span class="btnTableView">Table mode</span>
            <span class="btnTileView">Tile mode</span>
         </div>
         <div class="content">
            <div class="tileContent">
               <div class="tile">
                  item 1
               </div>
               <div class="tile">
                  item 2
               </div>
               <div class="tile">
                  item 3
               </div>
               <div class="tile">
                  item 4
               </div>
               <div class="tile">
                  item 5
               </div>
               <div class="tile">
                  item 6
               </div>
               <div class="tile">
                  item 7
               </div>
               <div class="tile">
                  item 8
               </div>
                <div class="tile">
                  item 9
               </div>
                <div class="tile">
                  item 10
               </div>
            </div>
            <div class="tableWrapper">
               <div class="headerRow">
                  <div id="tableTitleHeader" class="headerCol titleCol"><span>Title</span></div>
                  <div id="tableDateHeader" class="headerCol dateCol"><span>Uploaded</span></div>
               </div>
               <div class="tableContent">
                  <div class="tableRow">
                     <span class="dataCol titleCol">item 1</span>
                     <span class="dataCol dateCol">8/1/2013</span>
                  <div class="tableRow">
                     <span class="dataCol titleCol">item 2</span>
                     <span class="dataCol dateCol">8/2/2013</span>
                  </div>
                  <div class="tableRow">
                     <span class="dataCol titleCol">item 3</span>
                     <span class="dataCol dateCol">8/3/2013</span>
                  </div>
                  <div class="tableRow">
                     <span class="dataCol titleCol">item 4</span>
                     <span class="dataCol dateCol">8/4/2013</span>
                  </div>
                  <div class="tableRow">
                     <span class="dataCol titleCol">item 5</span>
                     <span class="dataCol dateCol">8/5/2013</span>
                  </div>
                  <div class="tableRow">
                     <span class="dataCol titleCol">item 6</span>
                     <span class="dataCol dateCol">8/6/2013</span>
                  </div>
                  <div class="tableRow">
                     <span class="dataCol titleCol">item 7</span>
                     <span class="dataCol dateCol">8/7/2013</span>
                  </div>
                  <div class="tableRow">
                     <span class="dataCol titleCol">item 8</span>
                     <span class="dataCol dateCol">8/8/2013</span>
                  </div>
               </div>
         </div>
         </div>
         <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
         <script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
         <script>
            $(document).ready(function() {
               $(".tileContent").isotope({
                  itemSelector : ".tile",
                  layoutMode : "fitRows",
                  animationEngine: "best-available",

                  animationOptions: {
                     duration: 500,
                     easing: "linear",
                     queue: false
                  }
               });

               $(".tableContent").isotope({
                  itemSelector : ".tableRow",
                  layoutMode : "straightDown",
                  animationEngine: "best-available",

                  animationOptions: {
                     duration: 500,
                     easing: "linear",
                     queue: false
                  }
               });

               $(".tileContent").show();
               $(".tableWrapper").hide();

               $(".btnTileView").click(function() {
                  $(".tileContent").show();
                  $(".tableWrapper").hide();
               });

               $(".btnTableView").click(function() {
                  $(".tableWrapper").show();
                  $(".tileContent").hide();
               });
            });
         </script>
      </div>
   </body>
</html>

score 1 · Accepted Answer

reLayout を呼び出してみてください ( demo fiddle ):

$(".btnTileView").click(function () {
    $(".tileContent").show();
    $(".tableWrapper").hide();
    $(".tileContent").isotope( 'reLayout' );
});

$(".btnTableView").click(function () {
    $(".tableWrapper").show();
    $(".tileContent").hide();
    $(".tableContent").isotope( 'reLayout' );
});

アップデート：

私はこれでもう少し遊んでいて、コンテナにサイズがないことに気付きました.

視覚的なレイアウト (1 列から複数) を避けたい場合は、次のようにしてみてください。

コンテナのサイズをいじる

それでも reLayout が必要になる場合がありますが、場合によっては、位置の変更が必要ないこともあります。何が起こっているかを視覚化するのに役立つ 1 つの方法は、含まれている要素のいくつかに境界線を追加し、ウィンドウサイズを調整するときにそれらのサイズがどのように変更されるかを確認することです。

CSS の変更:

div.content {
    margin-left: 180px;
    min-height: 500px;
    position: relative;
}

.tileContent, .tableWrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

jquery-isotope - 複数のビューでの JQuery 同位体表示の問題

1 に答える 1

Related

Reference