javascript - 当取决于屏幕分辨率时，如何计算每行显示的 div 数量

Question

我有以下代码:

HTML

<div class="content" style="height: 30px;">
    <div class="content-box" id="myOptions">
        <div class="options-holder">
            <input type="checkbox" name="11111" id="Bob_111">
            <label for="111">Alex_1</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="22222" id="Bob_222">
            <label for="222">Alex_2</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="33333" id="Bob_333">
            <label for="333">Alex_3</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="44444" id="Bob_444">
            <label for="444">Alex_4</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="55555" id="Bob_555">
            <label for="555">Alex_5</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="66666" id="Bob_666">
            <label for="666">Alex_6</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="77777" id="Bob_777">
            <label for="777">Alex_7</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="88888" id="Bob_888">
            <label for="888">Alex_8</label>
        </div>
    </div>
</div>
<div class="button-wrapper"> <a href="#" class="toggle-trigger" id="showMoreButton" style="display:none;">
    <span data-collapse-text="Show less" data-expand-text="Show more" class="state up">Show more</span></a>
</div>

JavaScript

$.fn.myToggle = function () {
    return this.each(function () {
        var targetContainer = $(this),
            targetBox = targetContainer.find('.content'),
            targetTrigger = targetContainer.find('.toggle-trigger'),
            targetState = targetTrigger.find('.state'),
            contentBox = targetBox.find('.content-box'),
            boxHeight = contentBox.outerHeight(),
            optionHeight = targetBox.find('.options-holder').outerHeight();
        $(window).on('resize', function () {
            boxHeight = contentBox.outerHeight();
            if (targetState.hasClass('down')) {
                targetBox.stop(true, false).animate({
                    height: boxHeight
                });
            }
        });
        targetTrigger.on('tap', function () {
            targetBox.stop(true, false);
            if (targetState.hasClass('down')) {
                targetState.text(targetState.data('expand-text'));
                targetBox.animate({
                    height: optionHeight
                });
            } else {
                targetState.text(targetState.data('collapse-text'));
                targetBox.animate({
                    height: boxHeight
                });
            }
            targetState.toggleClass('up down');
            return false;
        });
    });
};
$(this.el).myToggle().on('click', '.checkbox-toggle', function (event) {
    var toggle = $(this),
        container = toggle.closest('.option-filter');

    event.preventDefault();
    container.find(':checkbox').prop('checked', toggle.hasClass('all'));
});

问题是 .option-holder div 不适合我的 .content-box div 中的一行所以我必须隐藏它们并创建显示更多/更少切换按钮以显示或隐藏其余部分。

一切正常，直到我只有特定数量的 .option-holder div 只适合一行，所以我不需要切换按钮(div 的数量是动态的来自服务器)。

我目前的解决方案是计算 div 的数量并仅在它们超过 4 个时才显示切换按钮(在大多数屏幕分辨率下，我每行得到 4 个 div)。 问题是当屏幕分辨率更大并且我每行得到 5 或 6 个时。

如果我每行有 6 个 div 但只显示 5 个 div，那么按钮仍然存在，因为我在 4 个 div 之后显示它。

我知道有很多简单的修复方法，但不允许我重写代码和更改其逻辑，因此我必须找到一种方法来计算每次连续显示多少个 div。

代码现在只需在每次单击按钮时更改 div .content 的高度即可显示或隐藏其余 div，而无需为“不显示”div 提供任何额外属性，例如style="display: none; 一起工作。

有什么建议吗？？

Answer 1

var divs = document.querySelectorAll('.options-holder'); //or getElementsByClassName... or just $('.options-holder').....
var x = divs.length;
var number_of_elements_in_first_row = 0;
for ( var i = 0; i < x; i++;) {
    if ( divs[0].offsetHeight !== divs[i].offsetHeight ) {
        divs[i].style.display = "none"; // hide divs[i]
        /* or if you need only number of elements per row
           add this instead hiding elements */
        number_of_elements_in_first_row = i;
        break;
    }
}

if ( divs[0].offsetHeight !== divs[x].offsetHeight )
    // add/show your MORE button... your function call

所以，主要思想是，如果你有多行，最后一个元素将有不同的垂直位置。

编辑: 此代码将遍历目标 div 数组并隐藏所有未与第一个垂直对齐的 div。这不是完整的解决方案，更多的是关于如何处理这个问题的想法。