0

この jquery プラグインhttp://packery.metafizzy.co/を使用して動的グリッド レイアウトを作成しています。プラグインは完全に機能しています。

問題は ：

クリック イベントで動的グリッドを追加するオプションを作成しようとしています。グリッドの html コードを手作業でコーディングすると、グリッドは完全に表示されますが、jquery を使用してグリッド コードをテンプレート レイアウトに追加すると、グリッドはレイアウトの最上部から表示され、プラグインはグリッド位置。

私のコードをチェックして、ここで問題をライブで見ることができます: http://jsfiddle.net/A7ubj/2/

jquery追加コードがグリッドを一番上に置いているため、プラグインがグリッドを調整していないと思います。

プラグインがグリッドを完全に調整できるようにグリッドを追加する方法を教えてください。

これは私が追加している方法です：

$(function(){

 $('#myID').click(function(){
 $( "#container" ).append( $( '<div class="item diff">Grid</div>' ) );

  });

});

そして、これは私のコード全体です:

JS:

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="packery.pkgd.min.js" type="text/javascript"></script>

<script>
$( document ).ready(function() {

  var $container = $('#container');
  // initialize
    $container.packery({
    itemSelector: '.item',
    gutter: 10
   });
});

</script>

 <script>
  $(function(){
     $('#myID').click(function(){

     $( "#container" ).append( $( '<div class="item diff">Grid</div>' ) );   

    });

  });
</script>

CSS:

#container{
     background-color:#F00;
     width: 1130px;
     margin:0px auto;   
}

.item { width: 275px; background-color:#0C0;}

.item.w2 { width: 560px; background-color:#036; }

.diff{
    min-height:300px;   
}

.diff2{
   min-height:250px;    
}

HTML:

 <button id="myID">Click</button>

 <div id="container">
    <div class="item diff">Grid</div>
    <div class="item w2 diff2">Grid</div>
 </div>
4

1 に答える 1