Question

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

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％宽的色谱柱适用于两个色谱柱，并且旁边有一个33.33％的空间，这对于第二个50％宽的色谱柱是不够的。

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

.grid-sizer {
  width: 16.667%;
}

Answer 2

我认为你需要这个

＆＃13;

.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;
	  
	
	}
		
	}

＆＃13;

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

＆＃13;

Answer 3

您需要为砌体的初始化方法添加jquery。此外，您还需要删除外部图像加载资源。

java.lang.Exception: BaseProperties.getdate()

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

砌体库没有正确堆叠

3 个答案: