5

動作していましたが、何らかの理由で動作が停止し、何をしたのかわかりません。ボックスdivsが左に浮かんでいます。どこが間違っているのかわかりません。

Jクエリ

var $container = $('.work');            
$container.imagesLoaded(function(){                 
   $container.masonry({
      itemSelector: '.box',
      isAnimated: true,
      columnWidth: 250                  
   });
});

HTML

<div id="part-one" class="work">
   <div class="box col2"><img src="_assets/images/one.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/two.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/three.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/four.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/five.jpg" alt="" /></a></div>
</div>

CSS

.work {
   margin-left:98px;
   top:0;
   max-width:1600px;
   padding-bottom:100px;
   position:absolute;
}
4

2 に答える 2

6

プロパティを削除するcolumnWidthと、Masonry は最初の item 要素の幅を使用します。(ドキュメント)。

このJSFiddleをチェックしてください。http://jsfiddle.net/s8PhS/14/

JSFiddle で HTML コンテナのサイズを変更すると、動的にサイズ変更されます。また、デモ用に高さの異なる要素を
いくつか追加しました。石積みプラグインが機能し、要素が完全に配置されていることがわかります。<div>Odd Five element

したがって、基本的にはプロパティcolumnWidth: 250を削除し、Masonry が動的に取得できるようにします。

JSFiddleでは、これで問題が解決したようです。

ヒント: 最近、同じ jquery.masonry プラグインを使用しましたが、要素を並べ替えたいと思っていたので、Isotopeと呼ばれる素晴らしいプラグインを見つけました。これは驚くほどカスタマイズ可能です。

ホームページでデモをチェック！

于 2012-08-23T11:11:00.470 に答える
0

石積みの列幅プロパティとdivを表示するために利用できるスペースに関連しているようです。あなたのjsfiddleで遊んでみると、それについて考えます。幸運を。

于 2012-08-23T10:40:57.647 に答える