javascript - 是否可以随着容器宽度的增加而均匀地分配图像，同时增加或减少每一行中的元素数量？

我在一个液体容器里有一个图像库。在最小的尺寸（980px）有5个图像，没有边缘在最后一个图像上，所以一切都很好地适应容器。
当我增加窗口的宽度时，右边总是有额外的空间，直到有足够的空间让下一个图像凸出为止。很典型。我试过使用自适应图像，但它们太大了，无法手动完成任务。
是否有可能均匀地将图像间隔在灵活的div上（我知道这可能是使用正当的CSS），直到有足够的空间来适应行中的另一个图像时，它将包含在哪个点上？
我现在有一个列表中的图像。

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

项目向左浮动，有一个左边距，除了第一个子项有一个边距：0；
很合身（5横）。
http://d.pr/i/q24L
不太好（6+）：
http://d.pr/i/VAHi

最佳答案

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

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

//styles for 5 columns
}

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

//styles for 6 columns
}

显然，我选择的宽度是任意的。你需要知道每一列的大小是正确的
根据您的评论，我为JS解决方案（在jquery中）做了手脚。这是小提琴：http://jsfiddle.net/yEeKe/6/
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);

没有媒体查询。显然，你会调整这个以适应你的特定设计。。。。