html – 延迟加载没有重排或孤立边距的列图像

2023年5月10日 292次阅读

我已经看到了针对这个问题的各个部分的修复,但没有针对集体解决方案.我可以解决所有问题而不需要使用 javascript格式,除了从元素的边距转移到下一列的顶部(我无法理解为什么它没有被修复但是它似乎是 css3中的一段时间内的错误阻碍合成布局 1, 2)

我有一个响应的div容器分成三列(虽然这可以根据页面的宽度,每个响应布局而改变),包含不同数量的不同宽高比的嵌套图像的div,每个都具有margin-bottom属性.上面的问题非常明显,所以我正在寻找解决方案.

通常,建议涉及使用柱内破坏：避免;属性旁边将我的边距底部切换到填充底部.这个hack已经在其他人身上取得了一些成功,这也是我向你提出问题主题的地方.我无法实现这一点,因为我正在使用单独的hack来防止延迟加载的图像(使用lazy sizes插件*)重排到列中(padding-bottom作为比率hack,3).

因此,如果我使用padding-bottom确保我的列元素没有孤立的边距对齐,我将无法通过延迟将元素加载到列中来纠正重排.我不能使用固定大小的元素,因为列布局是响应的,元素随列大小动态缩小和放大.

有没有人在没有javascript格式的情况下成功地同时解决了这两个问题？

我渴望坚持这个特殊的延迟加载插件,原因不在于此问题的范围.

HTML代码：

<div id='columncontainer'>
    <div class='imagecontainer' style='padding-bottom:reflowPaddingAmountFromPHPvar;'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>
</div>

CSS代码：

#myContent  {
    position: relative;
    width: 100%;
    column-count: 3;
    column-gap: 20px;
    column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -webkit-column-break-inside:avoid;
}

.imagecontainer {
    position: relative;
    margin-bottom: 20px;
    img {
        position: absolute;
        top: 0;
        left: 0;
        height: auto;
        width: 100%;
    }
}

示例jsFiddle：

https://jsfiddle.net/g0yjd9ov/1/

元素应该在每列的顶部对齐,但是,第一列或第二列底部的元素(imagecontainer)上的margin-bttom被转移到第二列或第三列并且是孤立的,给人的印象是下一个元素具有margin-top值并打破顶部对齐.对于任何无法重新创建故意保证金最高值的情况,这都没有任何好处.我为这个例子随机化了元素的高度,所以偶尔问题不会显示出来(强调它有多大的麻烦.很难刻意表现出来).如果没有,只需刷新,因为它经常发生.

最佳答案这可以使用一个带有填充物的额外容器来解决.图像的容器(.imagecontainer)应该只包含图像,因为它是为其设置的宽高比.可以通过在该块上设置填充来实现块与列中的下一个块之间的空间.然后该块获得样式,以防止发生列中断.

我已经创建了一个基于问题中的示例代码构建的演示,但也包含了一些仅在问题文本中描述的内容.这是因为我想确保一切按照我认为的方式运作(如果我误解了这个问题,请告诉我).

特别是,我添加了lazy sizes插件并让它加载一些占位符图像.我还添加了一些样式并添加了不仅包含单个图像的块.对于防止元素内部中断的规则,我使用了一些稍微不同的规则,如this answer所示.最后,我定位了问题注释中讨论的.imagetextcontainer.

该演示可以在JSFiddle找到.我还在此处将其作为代码片段包含在内.

#columncontainer  {
  width: 100%;
  column-count: 3;
  column-gap: 10px;
}

.block-wrap {
  width: 100%;
  padding-bottom: 10px;
  
  /* prevent column breaks in item
  * https://stackoverflow.com/a/7785711/962603 */
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
  page-break-inside: avoid;           /* Theoretically FF 20+ */
  break-inside: avoid-column;         /* IE 11 */
  display:table;                      /* Actually FF 20+ */
}

.block {
  width: 100%;
  background-color: #ffff7f;
}

.block > p {
  margin: 0;
  padding: 10px;
}

.imagecontainer {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #a00;
}

.imagecontainer > img {
  width: 100%;
}

.imagetextcontainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>

<div id='columncontainer'>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 50%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x50/a00/fff  100w,
                          https://placehold.it/200x100/050/fff 200w,
                          https://placehold.it/400x200/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
      <p>Some text. Followed by another figure.</p>
      <div class='imagecontainer' style='padding-bottom: 100%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x100/a00/fff 100w,
                          https://placehold.it/200x200/050/fff 200w,
                          https://placehold.it/400x400/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 50%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x50/a00/fff  100w,
                          https://placehold.it/200x100/050/fff 200w,
                          https://placehold.it/400x200/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
      <p>Some text. No figure here.</p>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <p>Only text here.</p>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 50%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x50/a00/fff  100w,
                          https://placehold.it/200x100/050/fff 200w,
                          https://placehold.it/400x200/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 100%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x100/a00/fff 100w,
                          https://placehold.it/200x200/050/fff 200w,
                          https://placehold.it/400x400/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <p>Only text here.</p>
      <p>Tow lines now.</p>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 200%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x200/a00/fff 100w,
                          https://placehold.it/200x400/050/fff 200w,
                          https://placehold.it/400x800/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>