1

何人かの SO メンバーのアドバイスに従って、Web ページで Jquery Isotope を使用することにしました。Bootstrap 3 も使用していますが、サムネイル ギャラリー (さまざまなサイズの横向き/縦向きの画像) の見栄えがよくありません。

Bootstrap 3 .thumbnail クラスを使用して、レスポンシブ列に収まるように画像のサイズを変更しています。これらのサムネイル div に Isotope を適用するまで、すべてがうまく機能します。何が起こっているのか本当にわかりませんが、数日かけてすべてを調べましたが（笑わないでください）、理解できず、頭がおかしくなりそうです。 bootply.com で動作するように見える例を見たので、私は行方不明です (ただし、Bootstrap 3 で見たことがあるかどうかはわかりません)。

これが起こっていることです：

div をトリミングする同位体

ここに私がテストしているページへのリンクがあります: http://www.chrissvensson.info/projects/025

これは私が使用しているコードの主要部分です。

<div class="container iso">
<div class="row">
  <div class="item col-xs-12 col-sm-4 col-md-3">
    <a class="thumbnail fancybox" href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" rel="group"><img src="<?php echo $image->url() ?>" width="<?php echo $image->width(); ?>" height="<?php echo $image->height(); ?>"></a>
</div><!--thumbnail div-->
    <?php endforeach ?>
<?php endif ?>
</div><!--row-->

同位体スクリプトは次のとおりです。

$('.iso').isotope({
// options
itemSelector: '.item',
layoutMode: 'masonry'
});

私はこのjsfiddleで物事をテストしています: http://jsfiddle.net/52VtD/345/

これは Bootstrap 3 css にリンクされており、カスタマイズした CSS も含まれています。何らかの理由で、フィドルでは問題なく動作しているように見えますが (下の画像が切り取られているという事実を除いて)、私のサイトではまったく異なって見えます。ご覧のとおり、div の垂直方向の高さを計算せず、単にトリミングして互いの上に積み上げているようです。

さらにいくつかのポイント：

  • Bootstrap 3 の .thumbnail クラスの何かと関係があると確信しています。リンクからそのクラスを削除すると、問題なく動作するように見えます (画像が列に合わせて拡大縮小されないことを除いて)。
  • クレイジーな部分は次のとおりです。数回、別のタブをクリックしたり、別のウィンドウにアクセスした後に自分の Web サイトに戻ったりしましたが、すべてが機能しているように見えます。私はこれを目撃したことを誓いますが、幻覚かもしれません. ただし、これが非常に、非常に、非常にゆっくりと動作していることを意味するのかどうかはわかりませんか?

何かアドバイスをいただければ、とても助かります！よろしくお願いします。

4

3 に答える 3

0

imagesLoaded プラグインは完全に機能するはずです (Isotope v2 から削除されていますが)、私は個人的に次のように解決しました:

var myGrid = $('.grid');

myGrid.imagesLoaded(function(){
    myGrid.isotope();
});

しかし、このプラグインが内部的に問題を解決する方法も気に入りました: http://goo.gl/sQ6yXjで、非常に素晴らしい Isotope v2 を使用しています。

于 2014-10-28T23:51:41.613 に答える