Javascript 如何根据高度过滤元件以适合容器

也许这更像是一道数学题，我只是不知道如何开始计算

我有一系列元素（波峰）

对于不同的数组，这些元素具有不同的高度，但每个元素的宽度为2px，右边距为1px

这些元素必须附加到容器div中以形成交互式音频波。容器的宽度为700px，因此最多只能容纳233.5个元素

如何通过不附加高度较小的元素来过滤元素以适应容器，从而使容器中的元素接近>=232<234

下面是这个例子的一部分

$.create_waves=function（）{
$.append=函数（h）{
$。每个（波浪_列、函数（索引、项目）{
var峰值高度=项目*最大峰值剩余空间；
如果（项目>h）{
var波峰分压\
\
\
';
$（'wave#u result'）。追加（wave#u peak_div）；
}
});
}
var length=波列长度；
//警报（长度）；
美元。追加（0.3）；
$.animate_peak_height（）；
var num_peaks=$（'.wave_column_div'）。长度；
如果（峰值数<233）{
//美元。追加（0.5）；
}
}       
$.create_waves（）；

---

注意：我不想使用overflow:hidden超过3个元素（峰值），因为这将删除用于搜索的音频的重要部分。在我看来，去掉低峰值会放大波形，这就是为什么我更喜欢这种方式

以下是一种可能的算法：

创建

wave\u列

数组的副本

按降序排序，首先得到最大的

将其切片以仅保留233（或更少）个波

最后一个值是您的

min\u高度

代码：

var copy = wave_columns.slice(0,wave_columns.length-1);
copy.sort(function(a, b){return b-a});
copy = copy.slice(0,233);
var min_height = copy[copy.length-1];

---

我不确定是否理解您的问题，但您可以使用计数器（

maxpeaks

）跟踪容器中有多少峰值。当有足够的峰值时，可以通过返回false终止每个循环

$.create_waves=function（）{
var最大峰值=233；
$.append=函数（h）{
$。每个（波浪_列、函数（索引、项目）{
如果（最大峰值==0）{
返回false；
}
var峰值高度=项目*最大峰值剩余空间；
如果（项目>h）{
最大峰值--；
var波峰分压\
\
\
';
$（'wave#u result'）。追加（wave#u peak_div）；
}
});
}
var length=波列长度；
//警报（长度）；
美元。追加（0.3）；
$.animate_peak_height（）；
var num_peaks=$（'.wave_column_div'）。长度；
如果（峰值数<233）{
//美元。追加（0.5）；
}
}
只是要清楚，你问的是如何使波不在“向下”的斜率中间被切割？@艾略特，我想从波浪中去除低峰，这样重要的峰（可见峰）可以在波浪容器中不溢出，并且所有的可见峰的长度不应该大于233，也就是说，如果它们是，必须通过去除其中的最低峰值来减少它们，直到容器中剩下233个元素。希望这是有意义的。我想你明白了，但重要的一点是我们不只是想填充容器，我想用更可见的元素（峰值）（数组的最高值）填充容器。在这种情况下，通过去除低峰值。在您的逻辑中，您停止循环，而不评估哪些峰值高，哪些峰值低。我们假设移除低峰，而不是任何剩余的峰。因此，停止循环仅仅是因为索引>233不正确。计数器仅在
项>h
时减小，因此没有小于
h
的峰值。假设您有2000个峰值，前400个小于<然后下一个233个大于h，这将附加233个峰值，而不是继续获取其余峰值，以将其与前200个峰值进行比较。h不可能是一个固定值，我想，这就是我缺少它的地方。呵呵，好主意，那么你如何将排序后的副本映射回它的初始顺序呢？我看到了小提琴，只是想确保波峰没有被搅乱，同时确保我理解你的代码。@Relm这就是为什么我创建了一个副本，以便原始数组保持不变。这段代码的唯一目的是找出
最小高度
。没有别的了。然后您可以只执行
$.append（最小高度），将使用原始（未排序）数组。好的，我听到了，我仍在使用不同的数组测试不同的波形。我会回到你身边。
var copy = wave_columns.slice(0,wave_columns.length-1);
copy.sort(function(a, b){return b-a});
copy = copy.slice(0,233);
var min_height = copy[copy.length-1];

$.create_waves = function(){
    var maxpeaks = 233;
    $.append = function(h){
    $.each(wave_columns, function(index, item){
        if(maxpeaks == 0){
                return false;
        }
        var peak_height = item*max_peak_remaining_space;
        if (item > h){
        maxpeaks--;
        var wave_peak_div = '<nav class="wave_column_div">\
        <div class="wave_column_div_inner" data-height="'+peak_height+'">\
        </div>\
        </nav>';
        $('#wave_result').append(wave_peak_div);
        }
    });
    }
    var length = wave_columns.length;
    //alert(length);
$.append(0.3);  
$.animate_peak_height();
var num_peaks = $('.wave_column_div').length;
if (num_peaks < 233){
    //$.append(0.5);
    }
}