砌体画廊未正确堆叠

Question

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

Answer 1

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

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

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

.grid-sizer {
  width: 16.667%;
}

Answer 2

我认为你需要这个

.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 3

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

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

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