Question

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

Waveform

我有一系列元素（波峰）。

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

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

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

这是这个例子的小提琴。 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个元素（峰值），因为这将取出用于搜索的音频的重要部分。如我所见，取出低峰会缩放波形，这就是我喜欢这种方式的原因。

Answer 1

这是一种可能的算法：

创建wave_columns数组的副本。
按降序对其进行排序，以便先获得最大的
将其切割为仅保留233（或更少）波浪
最后一个值是您的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

Answer 2

我不确定我理解您的问题，但您可以使用计数器（maxpeaks）来跟踪容器中有多少个峰。当你有足够的峰值时，你可以通过返回false来终止每个循环。

jsfiddle demo

$.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);
    }
}

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

2 个答案:

JS Fiddle Demo