首次加载我的网页时图像的奇怪显示布局答案

【问题标题】：Weird display layout of images on first load of my web page首次加载我的网页时图像的奇怪显示布局
【发布时间】：2021-01-11 21:24:23
【问题描述】：

我正在尝试通过 GitHub Pages 构建我的网络作品集，当我在本地对其进行测试时，一切都按预期工作。但是，当我提交到 GitHub 并对其进行测试时，我会遇到如下奇怪的行为：

但是，我也得到了正确的行为，尤其是在我重新加载页面时。

是什么导致了这种奇怪的跳跃？

.item-list {
  overflow: hidden;
  text-align: center;
  margin: 0 0 0 -24px;
}

.item-list li {
  display: inline-block;
  margin: 0 0 25px 24px;
  vertical-align: top;
  font-size: 0;
}

.item {
  text-align: center;
  width: 270px;
  margin: 0 auto;
}

.item .image {
  position: relative;
}

.item .image img {
  min-width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 50%;
}

.item .hover {
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: #6abb84;
  opacity: 0.9;
  border-radius: 50%;
  behavior: url(css/PIE.htc);
}

.item .hover.active {
  display: block;
}

.item .item-content {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  height: 270px;
  z-index: 400;
  padding: 0 30px;
}

.item a {
  text-decoration: none;
}

.item .item-content h4 {
  display: block;
  background: url(../images/bg_white_border.gif) no-repeat 50% 100%;
  color: #fff;
  text-transform: uppercase;
  font-family: 'novecentosanswide';
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  padding: 0 0 20px;
  text-align: center;
  margin: 0 0 15px;
}

.item .item-content p {
  color: #fff;
  text-align: center;
  display: block;
  font-size: 15px;
  line-height: 17px;
}


/*contact*/

.clear {
  clear: both;
}

.images_holder {
  float: left;
  margin: 5px 130px 0 0;
  width: 370px;
}

.images_holder img {
  width: 100%;
  height: auto;
  display: inline;
}

<ul id="container" class="item-list">
  <li class="item web key">
    <div class="image ">
      <img src="images/dungeon_mobile.png" alt="" />
      <div class="hover">
        <a class="fancybox" rel="gallery1" href="#portfolio_1">
          <div class="item-content">
            <h4>Dungeon Mobile</h4>
            <p>2D RPG Mobile Game Currently Under Development</p>
          </div>
        </a>
      </div>
    </div>
  </li>
</ul>

网站参考：https://panoskikas.github.io/
回购：https://github.com/PanosKikas/PanosKikas.github.io

【问题讨论】：

请分享您的代码（或链接），以便人们帮助您；没有它，就很难理解是什么导致了这个问题。
由于我们看不到您的代码，也无法运行您的站点对其进行分析，因此我们无法告诉您原因可能是什么。图片可以帮助可视化问题，但它们不允许任何人诊断任何事情。这就像向机械师展示汽车冒出的烟雾一样。当然，他们可以看到烟雾，但如果不实际检查汽车，他们不太可能修复它。
@ADyson，这实际上是一个出色而准确的例子；我必须记住它以备将来参考。
据我所知，您的 HTML 代码包含一些 <b></b> 标签，其目的不明确，并且在某些方面，标签嵌套似乎不正确（例如，在最后一个 @ 987654329@)。从控制台我还可以看到有一个图像（'/images/img_pf02.jpg'，在<div id="portfolio_3"></div> 内）生成 HTTP 404 状态。最后，您在“FEATURE”之前的所有开头<b> 标记都没有匹配的结尾标记。我建议您检查并清理 HTML 代码。
@PanosKikas，如果您检查控制台，您会看到包含图像的 <li></li> 添加了一些内联样式，这就是导致问题的原因（图像显示不正确将top 属性设置为“135px”而不是“0”）。据我所知，您正在使用的“同位素”库添加了样式，因此问题可能是由与之相关的东西引起的；您应该检查模板（'cells-by-row.js'）、初始化及其用法。

标签： javascript html jquery css

【解决方案1】：

所以，在页面完全加载后，我通过单击“所有作品”按钮设法破解了它：

    <script>
    window.addEventListener('load', function () {
      document.querySelector('li.active').click()
    })
    </script>

我对这个解决方案并不完全满意，但它比以前更好。如果有人有更好的解决方案，请分享！

【讨论】：

【解决方案2】：

您可以使用 Javascript 点击“所有作品”链接：

document.querySelector('li.active').click()

我已在 Chrome 开发者控制台中对此进行了测试，它应该可以工作。只需将其放入body 元素末尾的script 标记中即可。

<script>
  document.querySelector('li.active').click()
</script>

【讨论】：

这有点好，但我仍然有一些奇怪的行为
尤其是当我 ctrl shift + r
@PanosKikas 我明白你的意思。我会努力解决这个问题