Question

我已经为flexbox网格功能编写了一个脚本，但是我在数学计算中遇到了一些问题，以找出最后一行有多少个项目，因为我希望对它们应用一个类以修复flexbox样式如果不是整行的话。

我的情况：

我有4种布局：1列，2列，3列和4列。

在不同情况下，我会遇到以下情况：

对于4列布局，底行可能还剩下3个。
对于4列布局，底行可能还剩下2个。
对于4列布局，底行可能还剩下1个。
对于3列布局，底行可能还剩下2个。
对于3列布局，底行可能还剩下1个。
对于2列布局，底行可能还剩下1个。

在每种情况下，我都需要向底行中剩余的项目添加不同的类，这些类是：

flex-last（用于连续保留的最后一个/单个项目）
flex-second-last（连续倒数第二个）
屈曲倒数第三（连续第3个倒数第一个）

仅当行不完整时才应用这些类，例如如果4列的底行有4个项目，则无需应用任何样式，因为不需要样式修复。

我当前的代码运行正常，但是遇到一个实例，其中有43个项目，并且数学似乎有问题。

随着屏幕尺寸变小，它会校正布局，直到它的第1列越来越小，这意味着计算在所有情况下都必须有效。

下面是我的代码：

jQuery(document).ready(function($) {
    $(".flex-container").each(function() {
        var flexColumns = $(this).attr("rel");
        var self = $(this);

        function flexboxFixes(){
            if(self.find(".flex-item").hasClass("flex-cols-3")) {
                var flexItemCount = self.find('.flex-cols-3').length;
                if ((flexItemCount - 1) % 3 === 0) {
                    self.find(".flex-cols-3:last-of-type").addClass("flex-last");
                } else if ((flexItemCount - 1) % 3 !== 0 && flexItemCount % 3 !== 0 ) {
                    self.find(".flex-cols-3:last-of-type").addClass("flex-last");
                    self.find(".flex-cols-3:nth-last-of-type(2)").addClass("flex-second-last");
                }   
            } else if(self.find(".flex-item").hasClass("flex-cols-4")) {
                var flexItemCount = self.find('.flex-cols-4').length;
                if ((flexItemCount - 1) % 4 === 0) {
                    self.find(".flex-cols-4:last-of-type").addClass("flex-last");
                } else if ((flexItemCount - 2) % 4 === 0) {
                    self.find(".flex-cols-4:last-of-type").addClass("flex-last");
                    self.find(".flex-cols-4:nth-last-of-type(2)").addClass("flex-second-last");
                } else if ((flexItemCount - 2) % 4 !== 0 && flexItemCount % 4 !== 0) {
                    self.find(".flex-cols-4:last-of-type").addClass("flex-last");
                    self.find(".flex-cols-4:nth-last-of-type(2)").addClass("flex-second-last");
                    self.find(".flex-cols-4:nth-last-of-type(3)").addClass("flex-third-last");
                }   
            } else if(self.find(".flex-item").hasClass("flex-cols-2")) {
                var flexItemCount = self.find('.flex-cols-2').length;
                if ((flexItemCount - 1) % 2 === 0) { //Is there 1 extra?
                    self.find(".flex-cols-2:last-of-type").addClass("flex-last");
                }
            }
        }
        flexboxFixes();

        $(window).bind('resize',function(){flexboxFixes();});
    });
});

值得注意的笔记：

这些可能会帮助您弄清楚我们如何进行数学运算而不会发生冲突？

X / 1始终等于整数
X / 2始终等于整数或.5
X / 3始终等于整数或.33或.66
X / 4始终等于整数或.25或.5或.75
整数从不十进制=全行
2列，剩余的.5 = 1
3个col，剩余.33 = 1，剩余0.66 = 2
4个col，还剩.25 = 1，.5 =还剩2个，.75 =还剩3个

我在想一些事情，首先检查布局，然后检查十进制值以查看剩余多少个项目，因为所有数字都相同？

var flexItemCount = self.find('.flex-cols-4').length;
var flexItemMath = flexItemCount / 4;
alert(flexItemMath % 1);

if (flexItemMath % columnCount) == 0.X

这似乎可行吗？

Answer 1

在先前对整个问题进行了全面思考之后，我发现了一个简单的答案，当答案除以列数时，该答案将检查特定列布局的十进制值。

if(self.find(".flex-item").hasClass("flex-cols-3")) {
    var flexItemCount = self.find('.flex-cols-3').length;
    var flexItemMath = flexItemCount / 3; //NEW
    flexItemMath = flexItemMath % 1; //NEW

    var flexItemRound = Number(flexItemMath).toFixed(2); //NEW

    if (flexItemRound == 0.00) { //NEW

    } else if (flexItemRound == 0.33) { //NEW
        self.find(".flex-cols-3:last-of-type").addClass("flex-last");//1 remainder 0.33
    } else if (flexItemRound == 0.66) { //NEW
        self.find(".flex-cols-3:last-of-type").addClass("flex-last");
        self.find(".flex-cols-3:nth-last-of-type(2)").addClass("flex-second-last"); //2 remainder 0.66
    }   
}

Javascript / jQuery数学逻辑

1 个答案: