javascript - 如何根据高度过滤元素以适合容器

Question

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

我有一个元素数组(波峰)。

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

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

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

这是这个例子的 fiddle 。 https://jsfiddle.net/8ko3dozj/

$.create_waves = function(){    
            $.append = function(h){
            $.each(wave_columns, function(index, item){
                var peak_height = item*max_peak_remaining_space;
                if (item > h){
                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);
            }
        }       
        $.create_waves();

注意:我不想对超过 3 个元素(峰值)使用 overflow:hidden，因为这会删除用于搜索的音频的重要部分。正如我所见，去除低峰值会放大波形，这就是我喜欢这种方式的原因。

Answer 1

这是一个可能的算法:

1. 创建您的 wave_columns 数组的副本。
2. 按降序排列，最大的放在最前面
3. 将其切片以仅保留 233(或更少)波
4. 最后一个值是您的min_height

在代码中:

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];

JS Fiddle Demo