web-dev-qa-db-ja.com

積み重ねられた石積みの画像

私は画像ギャラリーの石積みレイアウトに取り組んでいます。しかし、ほとんどの場合、組積造は互いに重なり合った画像を表示します。残りの時間は問題なく、場合によっては一部の画像divが囲んでいるdivの下のdivにオーバーフローします。

これらの画像を含める方法と重複を防止しない方法。 imagesLoadedメソッドは非推奨になったと思います。

わかりました、これが私のコードです：

部分的な画像の例。たくさんあります

<div class="container span3" >
        <div class="image">
            <div class="content">
                <a href="/issues/<%= image.id %>"></a>
                <%= image_tag(image.photo.url(:medium)) %>
            </div>
        </div>
        <div class="title">
            <h2><a href="/images/<%= image.id %>"><%= truncate(image.title, :length => 20, :omission => '...') %></a></h2>
        </div>
    </div>

同封のコード：

<div class="images-grid">
  <div class="row" id="images_container">
    <%= render :partial => 'shared/images' %>
  </div>
</div>

CSS：

.images-grid .container .image {
    overflow:hidden;
    position:relative;
}

.images-grid .container .image img {
    height:auto;
    width:100%;
}

.images-grid .container {
    display:inline-block;
    background-color:#fff;
    margin-bottom:30px;
    padding-bottom:10px;
    position:relative;
}

JQuery：

$(document).ready(function() {
    var $container = $('#images_container');
    // initialize
    $container.masonry({
      columnWidth: 150,
      itemSelector: '.property',
      isAnimated: true,
      isFitWidth: true
    });
});
jqueryhtmlcssruby-on-railsjquery-masonry
13
Steve Robinson

最初に使用するimagesLoaded：

// with jQuery
var $container = $('#container');

// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
     $container.masonry();
});

次に、可能であれば、画像タグで画像の幅/高さの属性を指定します

<img src="...." width="200" height="200" />

imagesLoadedは非推奨ではありません：

http://masonry.desandro.com/layout.html#imagesloaded

22
grigno