javascript - float 最少的空白

Question

请引用http://lrin.tk/float_problem.htm .

这是我的页面的样子:

   +-----------------------+ +---------------------------+ +--------------+ 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::| 
   +-----------------------+ |___________________________| +--------------+ 
                             |___________________________|                  
                             |___________________________|                  
                             |___________________________|                  
              [2]            |___________________________|       [1]         
                             |___________________________|                  
                             |___________________________|                  
                             +---------------------------+                  
       +--------------+ +------------+ +----------+ +---------------------+ 
       |**************| |````````````| |==========| |"""""""""""""""""""""| 
       |**************| |````````````| |==========| |"""""""""""""""""""""| 
    [3]|**************| |````````````| |==========| |"""""""""""""""""""""| 
       |**************| |````````````| |==========| |"""""""""""""""""""""| 
       |**************| |````````````| |==========| |"""""""""""""""""""""| 
       +--------------+ +------------+ +----------+ +---------------------+ 
                                              +---------------------------+ 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                              +---------------------------+ 

• 所有 div 的高度都固定为某个值。在 HTML 文件中，200px。

• 实际上，右上角的 ___________-striped div 是固定的(不是 CSS-ually position:fixed)边。

当窗口调整大小(阈值为 20px)时，将调用 reArrange 函数。
现在代码只是简单地打乱 div，所以不灵活的浏览器只会将区域 #1 和区域 #2 留空，更不用说区域 #3 的一小部分了。

无论 div 的排列方式如何，我都希望它适合一行的大部分区域。
这意味着，只有当当前行没有空间容纳任何(实际上是“最窄的”)未排序的divs.

所以在例子中，理想的结果应该是:

 +--------------+ +--------------+ +---------------------------+ +------------+ 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 |::::::::::::::| |**************| |___________________________| |````````````| 
 +--------------+ +--------------+ |___________________________| +------------+ 
         +-----------------------+ |___________________________|   +----------+ 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         |]]]]]]]]]]]]]]]]]]]]]]]| |___________________________|   |==========| 
         +-----------------------+ +---------------------------+   +----------+ 
                          +---------------------+ +---------------------------+ 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          |"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                          +---------------------+ |{{{{{{{{{{{{{{{{{{{{{{{{{{{| 
                                                  +---------------------------+ 

在我看来，一些“动态规划”或“循环”似乎可以解决问题。但是，我只是一名高中生，对编程一窍不通。

这有可能吗？

Answer 1

我不确定你是否可以让它更轻量或定制它，但 Isotope 有很多选择。

JQuery 同位素 - http://isotope.metafizzy.co/

另请务必阅读帮助，这有助于调试您可能遇到的任何问题 - http://isotope.metafizzy.co/docs/help.html

您还可以在 Github - https://github.com/desandro/isotope 上阅读有关该插件的更多信息- 从那里您还可以下载代码的缩小版本。

还有另一个插件被合并到 Isotope 中使用的布局 mdo 之一。 JQuery Masonry - http://masonry.desandro.com/ . Masonry 允许您通过垂直而不是水平排列和对齐 float 元素来插入布局中的空白空间。