CSS Masonry图片画廊行间距异常问题排查与解决

复制Codepen上shinya1992的「Moodboard with Masonry」代码搭建图片画廊后，运行出现以下布局问题：

• 第一行图片与下方图片间距过大
• 图片之间无均匀间距

核对代码复制准确性后，排除部署环境、图片尺寸因素，最终定位问题为缺失运行所需的依赖库：

1. jQuery：Masonry作为jQuery插件，依赖jQuery核心库
2. Masonry脚本及imagesLoaded：代码中使用的imagesLoaded()和.masonry()方法均来自该库套件

解决步骤 #

需要在HTML文档中按顺序引入以下三个依赖资源（可使用本地文件或官方提供的资源）：

1. jQuery核心库
2. Masonry布局插件脚本
3. imagesLoaded脚本（用于确保图片加载完成后再执行布局）

引入位置建议放在</body>标签前，确保DOM加载完成后执行脚本。

完整可运行代码 #

HTML #

<div class='title'>Moodboard with Masonry</div>
<div class='grid'>
 <div class='grid-sizer'></div>
  <div class='gutter-sizer'></div>
  
  <div class='grid-item'>
    <img src='https://farm1.staticflickr.com/149/428144742_f509cd9927.jpg'>
    <div class='itm-from'>
      from <a href='#'>blahblah</a>
    </div>
  </div>
  <div class='grid-item'>
    <img src='https://farm1.staticflickr.com/204/489660321_a6833ba9cf.jpg'>
    <div class='itm-from'>
      from <a href='#'>blahblah</a>
    </div>
  </div>
  <div class='grid-item'>
    <img src='https://farm1.staticflickr.com/244/459042039_98a488bf79.jpg'>
    <div class='itm-from'>
      from <a href='#'>blahblah</a>
    </div>
  </div>
  <div class='grid-item'>
    <img src='https://farm1.staticflickr.com/27/92937010_2d03825900.jpg'>
    <div class='itm-from'>
      from <a href='#'>blahblah</a>
    </div>
  </div>
  <div class='grid-item'>
    <img src='https://farm1.staticflickr.com/637/31711772564_f0a9627692.jpg'>
    <div class='itm-from'>
      from <a href='#'>blahblah</a>
    </div>
  </div>
  <div class='grid-item'>
    <img src='https://farm1.staticflickr.com/73/154716528_717697a157.jpg'>
    <div class='itm-from'>
      from <a href='#'>blahblah</a>
    </div>
  </div>
  
  <div class='grid-item'>
    <img src='https://farm1.staticflickr.com/77/199628917_e19e3ff68d.jpg'>
    <div class='itm-from'>
      from <a href='#'>blahblah</a>
    </div>
  </div>
  
  <div class='grid-item'>
    <img src='https://farm2.staticflickr.com/1029/1144531870_5b1119763b_z.jpg?zz&'>
    <div class='itm-from'>
      from <a href='#'>blahblah</a>
    </div>
  </div>
</div>

<!-- 按顺序引入依赖库 -->
<!-- 1. jQuery核心库 -->
<!-- 2. Masonry布局插件脚本 -->
<!-- 3. imagesLoaded脚本 -->
<script></script>
<script></script>
<script></script>

CSS #

*{ box-sizing: border-box;}
a {
  text-decoration: none;
}
body {
/*   background: #cc6633; */
  font: 12px 'Montserrat', 'Helvetica', sans-serif;
}
.title {
  color: #7d3917;
  font-size: 46px;
  margin: 10px 0 30px 0;
  text-align: center;
}
.grid {
  margin: 0 auto;
  width: 90%;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-sizer,
.grid-item {
  width: 24%;
}
.gutter-sizer {
  width: 1.3333%;
}


.grid-item {
  float: left;
  margin-bottom: 1.3333%;
  position: relative;
}

.grid-item img {
  display: block;
  width: 100%;
}

.itm-from {
  background: #cc6633;
  background: rgba(204, 102, 51, 0.7);
  color: #fdfdfd;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  -moz-transition: 0.2s opacity ease-in-out;
  -o-transition: 0.2s opacity ease-in-out;
  -webkit-transition: 0.2s opacity ease-in-out;
  transition: 0.2s opacity ease-in-out;
  width: 100%;
}
.grid-item:hover .itm-from {
  opacity: 1;
}
.itm-from a {
  color: #7d3917;
  display: block;
}
@media all and (max-width: 900px) {
  .grid-sizer, 
  .grid-item {
    width: 32%;
  }
  .gutter-sizer {
    width: 2%;
  }
  .grid-item {
    margin-bottom: 2%;
  }
  #pdesc { line-height: 1.5; }
}
@media all and ( max-width: 700px) {
  .grid-sizer, 
  .grid-item {
    width: 48%;
  }
  .gutter-sizer {
    width: 4%;
  }
  .grid-item {
    margin-bottom: 4%;
  }
}
@media all and ( max-width: 400px ) {
  .grid-sizer, 
  .grid-item {
    width: calc(100%);
  }
}

JavaScript #

var $grid = $('.grid').imagesLoaded().progress( function() {
  $grid.masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
  }); 
});

内容的提问来源于stack exchange，提问作者linkrot