ギャップのない石積みギャラリーレイアウト

Question

石工ギャラリーを作成したいが、画像間に隙間がない。私は石積み（隙間を残す）、同位体（隙間を残す）、そしてパッペリー（私が欲しいと思うように見えるが、レイアウトの一番下に互い違いの画像を残す）を試みた。

たとえば、画像の四角形を作成したいとします。

1,000x1000と言うことができます。その中で私は、レイアウトにすべての異なるサイズの画像を収めたいと思っています。

誰でも私が達成しようとしていることを知っていますか？

Answer 1

デフォルトでは、$.masonry()にはギャップがありません。あなたの画像の幅は非常にすべてが側によってフラッシュ側することができ一致を確認して、あなたのCSSからのギャップを削除し、要素間のスペースを作成します。あなたの石工の構成の側溝や幅を指定しないようにしてください。

$('.masonry').masonry();

img { 
 
    max-width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> 
 
<div class="masonry"> 
 
    <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg"> 
 
    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"> 
 
    <img src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg"> 
 
    <img src="http://i.dailymail.co.uk/i/pix/2016/03/08/22/006F877400000258-3482989-image-a-10_1457476109735.jpg"> 
 
    <img src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg"> 
 
    <img src="http://www.w3schools.com/w3css/img_forest.jpg"> 
 
</div>