石積みのギャラリーが正しく積み重なっていない

私はStackOverflowで非常に多くの答えを探しましたが、何も助けにはならないようです。私は以下のコードを持っています。それは、（現在のテストの画像の）初期化されていない石積みがうまく積み重なっているようですが、失敗します。理由私は石積みが必要です、画像が常に整列しないためです。石積みのギャラリーが正しく積み重なっていない

JSFiddle

HTML

<div class='gallery'> 
    <!-- Grid sizing element 33.33% --> 
    <div class="grid-sizer"></div> 

    <!-- Two 50% --> 
    <div class='masonry-item gallery-item image-half'> 
    <a data-fluidbox="true" href="http://placehold.it/450x250"><img class="img-responsive" src="http://placehold.it/450x250" alt="450x250" /></a> 
    </div> 
    <div class='masonry-item gallery-item image-half'> 
    <a data-fluidbox="true" href="http://placehold.it/450x250"><img class="img-responsive" src="http://placehold.it/450x250" alt="450x250" /></a> 
    </div> 

    <!-- One 100% --> 
    <div class='masonry-item gallery-item image-full'> 
    <a data-fluidbox="true" href="http://placehold.it/900x400"><img class="img-responsive" src="http://placehold.it/900x400" alt="900x400" /></a> 
    </div> 

    <!-- Three 33.33% --> 
    <div class='masonry-item gallery-item image-third'> 
    <a data-fluidbox="true" href="http://placehold.it/300x500"><img class="img-responsive" src="http://placehold.it/300x500" alt="300x500" /></a> 
    </div> 
    <div class='masonry-item gallery-item image-third'> 
    <a data-fluidbox="true" href="http://placehold.it/300x500"><img class="img-responsive" src="http://placehold.it/300x500" alt="300x500" /></a> 
    </div> 
    <div class='masonry-item gallery-item image-third'> 
    <a data-fluidbox="true" href="http://placehold.it/300x500"><img class="img-responsive" src="http://placehold.it/300x500" alt="300x500" /></a> 
    </div> 
</div>

CSS

.gallery .gallery-item { 
    margin-bottom: 20px; 
    float: left; 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    height: 400px; 
} 

.grid-sizer { width: 33.33%; } 
.gallery .gallery-item img{ 
    max-width: 100%; 
} 
.gallery .image-full { 
    width: 100%; 
    background: red; 
} 
.gallery .image-half { 
    width: 50%; 
    background: blue; 
} 
.gallery .image-third { 
    width: 33.33%; 
    background: green; 
} 
.grid-item { 
    margin-bottom: 10px; 
}

はJavaScript

var $gallery = $(".gallery"); 
$gallery.imagesLoaded(function() { 
    $gallery.masonry({ 
     percentPosition: true, 
     columnWidth: '.grid-sizer', 
    itemSelector: '.gallery-item', 
    }); 
});

出典

2017-12-22 Suthan Bala

ん[これは]（https://jsfiddle.net/xf07rf7s/）助け：

はあなたに.grid-sizeのための小さな乗数を使用する必要がありますか？ –

ありがとうございました。その場合はうまくいきましたが、それ以上のアイテムを追加すると再び壊れてしまいます –

あなたは33.33パーセントに.grid-sizerを設定することにより、33.33パーセントの3列のレイアウトを構築しました。

これは、50％幅のカラムが2つのカラムにはめ込まれ、1カラムのスペースが33.33％横になっていることを意味します。これは、2番目の50％幅のカラムでは不十分です。

.grid-sizer { 
    width: 16.667%; 
}

出典

2018-01-04 12:59:55

私はあなたが石工のためのあなたの初期化メソッドのためのjQueryを追加する必要があります。この

.gal { 
 
\t 
 
\t 
 
\t -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; /* Firefox */ 
 
    column-count: 3; 
 
\t 
 
\t 
 
\t } \t 
 
\t .gal img{ width: 100%; padding: 7px 0;} 
 
@media (max-width: 500px) { 
 
\t \t 
 
\t \t .gal { 
 
\t 
 
\t 
 
\t -webkit-column-count: 1; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 1; /* Firefox */ 
 
    column-count: 1; 
 
\t 
 
\t 
 
\t } 
 
\t \t 
 
\t }

<div class="container"> 
 

 

 
<h1>Pure Css Responsive Masonry Gallery</h1> 
 
<div class="col-md-12"> 
 
<div class="row"> 
 
<hr> 
 

 
\t <div class="gal"> 
 
\t 
 
\t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t 
 
\t \t <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
\t \t 
 
\t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t 
 
\t \t 
 
\t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t \t <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""><img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t \t <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t \t \t \t <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
\t \t \t 
 
\t \t \t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
\t \t \t \t <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
\t \t \t \t 
 
\t </div> 
 
\t 
 
</div> 
 
</div> 
 
</div>

出典

2017-12-22 13:48:05

答えがカランですが、以前のバージョンの一部と互換性があるため、Masonryプラグインを使用して解決できる解決策を探しています。 IE。 –

が必要だと思います。さらに、外部イメージ読み込みリソースを削除する必要があります。

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://jsfiddle.net/andrewgi/6m154y5z/

出典

2018-01-02 16:43:19 andrewgi

JSFiddleのインクルードメソッドを使用してjQueryをインクルードしました。 2つのjQueryインクルージョンのためにJavaScriptが壊れたため、CSSがグリッドのレンダリングを処理するため、あなたの作品はうまくいくように見えます。外部イメージに関しては、 'imagesLoaded'プラグインは全てのイメージがロードされるまで待機します。 –

okグリッドサイザーの列幅がグリッドを台無しにしています。すべての列の幅をページの33％に設定し、1つの列をページの50％の半分に設定しようとしています。あなたは33％、66％または100を使用する必要があります。また、20,40,60,80を使用することもできます。正しい幅を決めたら回答を更新できます。 – andrewgi

石積みのギャラリーが正しく積み重なっていない

答えて

関連する問題