Css 砌体容器-在某些媒体查询中，2列被视为1列（导致底部出现大间隙）

我的网站使用一个砖石容器。它可以在全屏上正常工作。随着它的尺寸减小（响应性），有些@media查询按设计工作，有些则不工作。以下是那些不起作用的人的行为：

当您滚动到底部时，在触发加载新图像/框之前，会有一个非常大的间隙。看起来好像其中一个容器正在计算其高度，就好像所有图像/框都在一列中一样，实际上，它们仍然显示在两列中。结果是容器的高度是两列高度的两倍，您必须滚动到最底部以触发加载新图像/框

我找不到每个媒体查询中需要调整或包含的罪魁祸首容器设置。或者，发生了一些我不明白的事情——我根本不知道砖石容器。我也看到了一些关于粘脚的建议

<?php echo $this->header_part; ?>

<div id="boxcontainerwrapper" class="maxwidth">

<header class="maxwidth">
    <div>
        <h1 class="newest-ideas"><?php echo $this->translate('Latest Finds');?></h1>
    </div>
</header>

<div class="clear mt20"></div>
<div id="boxcontainer" class="event-masonry-container" style="margin-top:-41px;"><?php echo $this->result_data; ?></div>
</div>

<script type="text/javascript">
head.ready('items', function(){
    App.loadAjaxData();
});
</script>
<?php echo $this->footer_part; ?>

---

解决方案：问题是砌体容器的列宽决定了高度大小，基于显示的图像/框的数量，但在我的css中，我能够以两列显示框。因此，容器根据图像/框的数量确定高度大小，但我根据希望的外观显示它们。最后，我在App.masonryOptions下的js文件夹中找到了columnWidth设置。这些允许我为各种视口大小设置列宽，并相应地调整css以显示一列或两列

@Red2678，你对我上一期的展示很有帮助，不知道你是否知道这里发生了什么。德克萨斯州@Red2678，你对我上一期的展示非常有帮助，不知道你是否知道这里发生了什么。德克萨斯州！

#boxcontainerwrapper { margin: 0 auto; padding: 0; width: 970px; }
#boxcontainer { margin: 0 auto; width: 100%; max-width: 970px;}