砌体画廊未正确堆叠

Question

我在 Whosebug 上查找了很多答案，似乎没有任何帮助。我有以下代码，它似乎在没有初始化砌体的情况下堆叠得很好（对于当前测试中的图像），但它失败了。我需要砌体的原因是图像不会总是对齐。

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',
    });
});

Answer 1

我认为你需要这个

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

<div class="container">


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

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

Answer 2

您需要为砌体的初始化方法添加 jquery。另外你需要删除你的外部图片加载资源。

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

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

Answer 3

通过将 .grid-sizer 设置为 33.33%，您构建了 3 列 33.33% 的布局。

这意味着 50% 宽的列适合两列，让 space 的 1 列 33.33% 在旁边，这对于第二个 50% 宽的列来说是不够的。

您应该为 .grid-size 使用较小的乘数，如：

.grid-sizer {
  width: 16.667%;
}

砌体画廊未正确堆叠

Masonry gallery not stacking correctly

javascript

jquery

css

jquery-masonry