Javascript jquery筛选的元素在div之间移动

我正在为div元素中列出的项目构建一个小的过滤功能。这些div元素位于相邻的滑块中。 因此，每列都包含许多项。过滤正在工作，但我找不到一种方法将过滤的项目逐个分组，以便它们位于第一列中，而不是在它们的oryginal列中：

<input id="filter" name="filter" size="40"/>

<div class="filtered">        
    <div class="archive-col-1 column">
        <div class="name"><div class="element">Alchemy</div></div>
        <div class="name"><div class="element">Balboa</div></div>
        <div class="name"><div class="element">Nebula</div></div>
        <div class="name"><div class="element">Radio</div></div>
    </div>
    <div class="archive-col-2 column">
        <div class="name"><div class="element">Mathematics</div></div> 
        <div class="name"><div class="element">Disco</div></div>
        <div class="name"><div class="element">Antwon</div></div>   
        <div class="name"><div class="element">Barracuda</div></div>            
    </div>
    <div class="archive-col-3 column">
        <div class="name"><div class="element">English</div></div>
        <div class="name"><div class="element">France</div></div>
        <div class="name"><div class="element">Nairobi</div></div>  
        <div class="name"><div class="element">Crazy</div></div>    
    </div>    
</div>

function filter(element) {

    $("#filter").keyup(function () {
        var filter = $(this).val(); 
        count = 0;

        $(".column .element").each(function () {
            var parent = $(this).parent();
            var length = $(this).text().length > 0;
            if (length && $(this).text().search(new RegExp(filter, "i")) < 0) {
                parent.hide();
            } else {
                parent.show();
                //appendTo.closest('.colums');
                count++;
            }
        });
    });
}

$('input').on('keyup change', function () {
    filter(this);
});

炼金术
巴尔博亚
星云
无线电
数学
迪斯科
安特旺
梭鱼
英语
法国
内罗毕
疯子
功能过滤器（滤芯）{
$（“#过滤器”）.keyup（函数（）{
var filter=$（this.val（）；
计数=0；
$（“.column.element”）。每个（函数（）{
var parent=$（this.parent（）；
var length=$（this）.text（）.length>0；
if（length&&$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
parent.hide（）；
}否则{
parent.show（）；
//最接近的（'.colums'）；
计数++；
}
});
});
}
$（'input'）。在（'keyup change'，函数（）{
过滤器（本）；
});

• 例如：

在我的另一个示例中，过滤工作正常，但我不知道如何限制行并将其他过滤项移动到下一列，现在它们只转到第一列：

有人有类似的问题吗？

---

此方法删除所有可见元素，并在检查当前列中是否有可用空间后将其分派，如果没有，则将占用下一列。

我认为这更像是一个CSS问题。我不能100%确定为什么您希望HTML中有不同的列。任何样式都应该放在CSS中，HTML应该只用于内容数据。意思是…如果你不总是想要多列…不要将多列硬编码到HTML中。在另一个keyup事件处理程序中添加keyup事件处理程序似乎不是一个好主意？@Dan Goodspeed，这些列是动态拉取的，它们必须是多列的，所以我必须基于硬编码的内容。下面是更新后的示例，其中使用了CCS@adeneo是的，我在这里更新了：嘿，斯莫基，这正是我想要的-非常感谢你的帮助！np；）请验证我的答案是否有帮助：）你的意思是投赞成票吗？我不能，因为它要求我必须有15个声誉点，而我只有一个：(

function dispatchElements() {
    var $elements = $('.column .element:visible').remove();
    var $column = $('.column:first');

    $elements.each(function(index, value) {
        var height = $column.height();
        var $childrens = $column.children(':visible');
        var childrenHeight = 0;

        $childrens.each(function(){
            childrenHeight += $(this).outerHeight();
        });

        childrenHeight += childrenHeight/$childrens.length;

        if (childrenHeight > height) {
            $column = $column.next();
        }

        $(this).appendTo($column);
    });
}