jquery - 在一行 float 元素之间添加一个元素

Question

我有一堆在网格中对齐的盒子。

它们都向左浮动，然后一个盒子的边距和宽度约为33%，这样一旦三个盒子彼此相邻，下一个盒子就会进入下一行。相当均匀的三分之一。

这就是我的开始:

当单击一个框时，我现在想在我单击的框下添加一个框。

我希望看到它以一种几乎只是增加了这排盒子之间的空间，并且新盒子被挤进该空间的方式发生。

这就是我想看到的:

目前我只是使用 jquery 的 .after() 在我点击的框后面添加一个框。这个框有 clear:both; 并且它可以完美工作，但仅当单击第三个框时...当我单击第二个或第一个框时，同一行的以下框会 float 进入下一行。 当然这是完全可以预见的，因为它完全按照我告诉它的方式去做。 但我希望他们留在那里!我只是不知道怎么办。

这就是我得到的:

实现这一目标的最佳方法是什么？

这是我的代码示例: http://jsfiddle.net/z3ggf/1/

Answer 1

所以基本上，您需要找到该行中的最后一个(第三个)框，然后附加一些 html

$(".box").click(function(){
    var next_third_box_index = Math.floor($(this).index('.box') / 3) * 3 + 2;            
    var $third = $('#container .box:eq('+next_third_box_index+')');      
    $third.after('<div class="break"></div>');                   
});

jQuery 演示:

• http://jsfiddle.net/9MMWs/

文档:

• http://api.jquery.com/index/

<小时/>

这是在单击 div 的行中查找第三个框的索引的方法:

Math.floor($(this).index('.box') / 3) * 3 + 2;

• 如果单击框 0，则第三个框索引等于 Floor(0/3) * 3 + 2 = 2
• 如果单击框 1，则第三个框索引等于 Floor(1/3) * 3 + 2 = 2
• 如果单击框 2，则第三个框索引等于 Floor(2/3) * 3 + 2 = 2
• 如果单击框 3，则第三个框索引等于 Floor(3/3) * 3 + 2 = 5
• 如果单击框 4，则第三个框索引等于 Floor(4/3) * 3 + 2 = 5
• 如果单击框 5，则第三个框索引等于 Floor(5/3) * 3 + 2 = 5
• 如果单击框 6，则第三个框索引等于 Floor(6/3) * 3 + 2 = 8
• ...