Javascript 是否可以随着容器宽度的增加均匀分布图像，同时增加或减少每行中的项目数？

我有一个流体容器中的图像库。在最小尺寸（980px）下，有5个图像，在最后一个图像上没有空白，因此所有内容都很好地适合容器

当我增加窗口的宽度时，右边总是有额外的空间，直到有足够的空间让下一个图像凸起。很典型。我尝试过使用自适应图像，但它们对于手动任务来说有点太大了

是否可以在灵活的div中均匀地分布图像（我知道使用justify css可以做到这一点），直到有足够的空间容纳行中的另一个图像，在这一点上它将被包括在内

我目前有一个列表中的图像

    <ul>
      <li>image</li>
      <li>image</li>
      <li>image</li>
      <li>image</li>
    </ul>

形象
形象
形象
形象

项目向左浮动，并留有左边距，但第一个子项留有边距：0

很合身（5跨）。

不太好（6+跨）：

---

我会使用媒体查询来确定不同的宽度，即：

@media screen and (max-width: 580px) {

//styles for 5 columns 
}

@media screen and (max-width: 650px) {

//styles for 6 columns 
}

显然，我选择的宽度是任意的。您需要知道每列的正确大小

根据您的评论，我对JS解决方案（在jquery中）做了一些修改。这是小提琴：

JS看起来像这样：

(function($){
    $('#myUL').width($(window).width() - ($(window).width() % $('img').first().width())); 
    $(window).resize(function(){
        $('#myUL').css('width', ($(window).width() - ($(window).width() % $('img').first().width())) +'px');     
    }); 
})(jQuery);

---

没有媒体查询。显然，您应该调整它以适应您的特定设计……

这可以使用

display:inline block和
文本对齐：对齐（）。但是，可能没有足够的图像来完全填充最后一行。在这种情况下，该行中图像之间的间距将不同。
您是否有浏览器控件，或者是否需要它在所有/大多数浏览器中工作？应在大多数浏览器中工作。。。ie 8+/ff/chrome/Safari您可能会以某种方式修改此选项，以说明最后一行中是否有两个项目，然后将它们左对齐右对齐？现在如果有两个项目，一个在左边，另一个在右边。这正是我想要的是。。最后一行与上面的行间隔不均匀。是的，完全是这样。我可以看到这是可行的，但如果可能的话，我不想添加5或6个媒体查询。我希望它可以用js或其他东西动态完成。你当然可以用js来完成。我以为你想要一个CSS解决方案。如果更简单的话，我也可以做一个JS答案？如果你想走这条路，我可以为你添加一个jquery解决方案。