0

JQuery MasonryとTwitterブートストラップの両方を一緒に使用していますが、いくつかの問題が発生しています。この問題は、両者の対立が原因ではないと思います。

私はBootstrapThumbnailsを使用して画像/テキストのdivを提供し、次にMasonryを使用してそれらすべてをより適切に配置しています。

将来的には、これらのサムネイルdivのそれぞれに挿入される新しいコンテンツは、動的に読み込まれるものもあり、必要に応じてdivを拡張できるようにするため、あまり制約されないようにしたいと考えています。コンテンツの表示を切り替えたり、ホバーなどにフライアウトコンテンツを配置したりする柔軟性が必要です。これにより、Masonryがレイアウト位置をリセットします。

Masonryがこれにどのように応答するかをテストするために、.thumbnailクラスのCSSを変更して、サムネイルdiv（それぞれにクラス'.thumbnail'があります）にカーソルを合わせると、下部にパディングが追加されます（これにより、高さが拡張されます）。

Masonryがロードされると、それはうまく機能し、初期サイズに基づいてすべてを配置します。

サムネイルにカーソルを合わせると、cssホバーが開始され、コンテナの高さが拡張されますが、下のサムネイルと重なるように強制されます。

これを克服するために、外部の.jsファイルにリンクし、カスタムjqueryを追加しました。これは素晴らしくシンプルで、各サムネイルにカーソルを合わせると、Masonryに更新/再読み込みを指示する関数を実行します。これは、サムネイルにカーソルを合わせるとうまく機能し、cssホバーが開始され、divが展開されてから、Masonryがすべてのdivを再配置して、新しいdivサイズに対応できるようにします。

私の問題：次にマウスをサムネイルの外に移動すると、Masonryは「cssホバー」の変更を元の状態に認識しないため、サムネイルの高さが低くなり、サムネイルと下のサムネイルの間にギャップが残ります。Divの高さが減少したときに石積みが新しい高さの値を認識しないようですが、Divの高さが拡大したときに認識しますか？

jQueryホバーの両方の状態に対してカスタム外部.jsで同じ関数を実行しており、Masonryが正常に応答することを期待していましたが、そうではありませんでした。何か案は？

私はすべての初期組積造を次のように定義します。

<script type="text/javascript">
$(window).load(function(){
    $('.container-fluid').masonry({
    itemSelector: '.thumbnail',
    isAnimated: true,
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
        }   
    });    
})              
</script>

私のカスタム.jsファイルには次のものが含まれています。

$(document).ready(function(){
$('.thumbnail').hover( 
    function(){run()},
    function(){run()}                     
);
});

function run() {$('.container-fluid').masonry('reload');}

どんな助けでもいただければ幸いです。

ありがとう

4

1 に答える 1

1

私が疑ったように、それは時間に関連した、またはイベントの順序の問題のようです。

これは保証されていませんがhandlerOut、ブラウザがサイズを変更する前にトリガーが呼び出され、ホバーしない .thumbnailようになっていると思います。しかし、これは単なる推測です。

とにかく、これはあなたが使うべきものです：

$('.thumbnail').hover( 
    function(){run()},
    function(){setTimeout(function(){run()}, 200)}                     
);

タイムアウトにより、ユーザーエクスペリエンスを妨げない限り、値は少しランダムになります。

このjsfiddleで動作するようです。

于 2012-06-26T23:39:31.507 に答える