CSS动态网格定位各种高度

Question

我正在尝试在CSS中构建一个简单的图像网格，它显示4列中的图像，下面没有间隙和动态浮动位置。

CSS：

.img-grid .img-grid-item-holder {
    display: inline-block;
    text-align: left;
    width: 25%;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

.img-grid img {
    width: 100% !important;
    height: auto !important;
}

HTML：

<div class="img-grid">
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/400/800/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/350/750/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/500/600/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/410/430/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/320/650/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/350/750/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/500/600/cats" />
    </div>
</div>

这是显示我目前拥有的HTML和CSS的JSfiddle。您可以看到右下角图像之间有空格。

我需要它看起来像这样（或者类似的），并且当我将新元素附加到img-grid div时允许元素整齐地坐在一起，同时确保旧元素保持其位置。

我尝试使用CSS3列进行此操作，但是它们不能很好地将动态附加元素添加到img-grid div，使旧图像更改位置。

提前致谢。

Answer 1

这是一种砌体布局。 我刚用http://masonry.desandro.com/

制作了它

查看此处的解决方案

https://jsfiddle.net/41efz7ye/22/

＆＃13;

＆＃13;

$(document).ready(function(){
$('.img-grid').masonry({
  // options
  itemSelector: '.img-grid-item-holder',
  columnWidth: 150
});
});

＆＃13;

.img-grid .img-grid-item-holder {
	width: 150px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

.img-grid img {
	width: 100% !important;
	height: auto !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
</script>
<div class="img-grid">
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/400/800/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/350/750/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/500/600/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/410/430/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/320/650/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/350/750/cats" />
    </div>
    <div class="img-grid-item-holder">
        <img src="http://www.lorempixel.com/500/600/cats" />
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;