Question

所以我正在设计一个在线投资组合，我正在研究砌体布局。除了我在图像的底部有一点间隙之外，每件事情都是如此;

https://jsfiddle.net/dzd3q58q/14/embedded/result/

.masonry .item,
.masonry .grid-sizer

任何人都可以帮忙解决这个问题吗？

Answer 1

首先，您使用h2，h3以及.item设置这些div的高度，因此当然它们显示红色，因为高度大于图像。通常你会设置宽度，而不是高度。你还需要使用imagesloaded来加载砌体，这样你的布局就不会变得很好，因为在装载所有图像之前，砌体正在设置项目。

通过删除高度并将grid-sizer与您的项目分开设置，您的CSS已固定jsfiddle。

你可以玩它。另外，仅供参考，将您的js放在jsFiddle的外部资源中，而不是在js窗格中。帮助您何时添加需要调试的代码。

CSS

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
      box-sizing: border-box;
  }

img{
display:block;
height:auto;
max-width:100%;    
}


body { font-family: sans-serif; }

.masonry {
background: #EEE;
  max-width: 1800px;
margin:120px auto;    
}

.grid-sizer {
 width: width:100%;
 }
.masonry .item {
width: 100%;
float: left;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius:;
margin-bottom: 20px;
}



@media screen and (min-width: 400px) {
.masonry .item,
.masonry .grid-sizer { width:  calc( ( 100% - 20px ) / 2 ); }
 }

 @media screen and (min-width: 900px) {
.masonry .item,
.masonry .grid-sizer { width:  calc( ( 100% - 40px ) / 3 ); }
.masonry .item.w2 { width:  calc( ( 100% - 20px ) / 2 ); }
.masonry .item.w3 { width:  calc( ( 100% - 40px ) * ( 2 / 3 ) + 20px); }
.masonry .item.w4 { width:  100%; }
  }

JS

var $container = $('#container');
 / initialize Masonry after all images have loaded  
 $container.imagesLoaded( function() {
 $container.masonry();
 });

在砖石布局中完美贴合图像

1 个答案: