javascript - 如何折叠不同高度的柱子

Question

在我的网站上，我有 6 列图像。每个都有相同数量的图像，但由于图像的高度不同，所以所有列的高度都不同。

这很好，除非我试图让它响应。当屏幕变小时，我将最后 3 列折叠到前 3 列下方。列向左浮动，所以我只使用

clear:left;

第4列实现了这个。但是，当我这样做时，列之间存在间隙......

我需要消除这个差距。我希望下面的列接触上面的列。我怎样才能做到这一点？这可以仅使用 CSS 来完成吗？

列有以下...

.imageWrap-col {
    float: left;
    max-width: 16%;
}

并且列容器有overflow:auto...

#gallery {
    height: 100%;
    width: 100%;
    position: fixed;
    overflow-y: auto;
}

Answer 1

你可以试试column CSS

body {/* or any container */
  -moz-column-width:180px;
  column-width:180px;
  column-gap:0.2em;
  max-width:800px;/* enough to hold four columns */
  margin:auto;
}
img {
  width:100%;/* or same value as column-width */
}

/* demo purpose */

html:before {
  content:' see snippet in fullpage, then resize window';
  display:block;
  text-align:center;
  font-size:1.6em;
}

<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>
<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>
<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>
<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>
<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>

它适用于任何容器和任何类型的盒子:

div {
  -moz-column-width: 200px;
  column-width: 200px;
  column-gap: 0.2em;
}
figure,
img {
  display: inline-block;
  width: 100%;
  margin: 0;
}
figure {
  border: solid;
  box-sizing: border-box;
  margin-bottom: 0.2em;
}
figcaption,
h1 {
  text-align: center;
  padding: 1em;
}

<div>
  <h1>see snippet in fullpage, then resize window</h1>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
</div>