代码仅适用于Firefox

Question

给定代码仅适用于Firefox，而不适用于任何其他浏览器。 我已经为它提供了Fiddle链接。代码在Firefox中运行良好，功能也正常，但任何其他浏览器都不支持。

错误显示为

  

由于长脚本错误

Fiddle

这是代码。

＆＃13;

＆＃13;

var $boxes;

$(document).ready(function() {
  $boxes = $(".box");
  setupColumns();
  $(window).on("resize", setupColumns);
});

function setupColumns() {
  var $columnwrapper = $("#columns");
  var w = $("<div>").addClass("column").width();
  var cnt = Math.floor($columnwrapper.width() / w);
  var cols = [];
  for (var i = 0; i < cnt; i++) {
    var $col = $("<div>").addClass("column");
    cols.push($col);
  }
  $columnwrapper.append(cols);
  var cnt = 0;
  $boxes.each(function() {
    $(this).detach().appendTo(cols[cnt]);
    cnt = (cnt + 1) % cols.length;
  });
}

$(".box").click(function() {
  if ($(this).height() != 100)
    $(this).animate({
      height: 100
    }, 1000);
  else
    $(this).animate({
      height: 150
    }, 1000);
});

＆＃13;

.column {
  width: 114px;
  float: left
}
.box {
  height: 100px;
  width: 100px;
  border: 2px solid;
  margin-bottom: 10px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="columns"></div>
<div class="box">HELLO WORLD 1</div>
<div class="box">HELLO WORLD 2</div>
<div class="box">HELLO WORLD 3</div>
<div class="box">HELLO WORLD 4</div>
<div class="box">HELLO WORLD 5</div>
<div class="box">HELLO WORLD 6</div>
<div class="box">HELLO WORLD 7</div>
<div class="box">HELLO WORLD 8</div>
<div class="box">HELLO WORLD 9</div>
<div class="box">HELLO WORLD 10</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是由于以下行：

var w = $("<div>").addClass("column").width();

除了Firefox之外，在其他浏览器中，它返回0会导致cnt变为 Infinity 。这就是为什么你要获得一个非常长的运行脚本，创建无限div并将它们添加到cols[]

Documentation for .width()说：

  

.width（）报告的值不能保证准确   隐藏元素或其父元素。要获得准确的值，请确保   在使用.width（）之前，该元素是可见的。

所以你需要做的是：

＆＃13;

＆＃13;

var $boxes;

$(document).ready(function() {
  $boxes = $(".box");
  setupColumns();
  $(window).on("resize", setupColumns);
});

function setupColumns() {
  var $columnwrapper = $("#columns");
  //////////start change////////////
  var dummy = $("<div>").addClass("column");
  dummy.appendTo($columnwrapper); // add it to wrapper so that it gets displayed
  var w = dummy.width(); // this now returns 114
  dummy.remove(); // now that we have got the width, remove it

  // just to be on safer side:
  if(w == 0){
    console.log("column width is 0.");
    return;
  }

  //////////end change////////////
  var cnt = Math.floor($columnwrapper.width() / w);
  var cols = [];
  for (var i = 0; i < cnt; i++) {
    var $col = $("<div>").addClass("column");
    cols.push($col);
  }
  $columnwrapper.append(cols);
  var cnt = 0;
  $boxes.each(function() {
    $(this).detach().appendTo(cols[cnt]);
    cnt = (cnt + 1) % cols.length;
  });
}

$(".box").click(function() {
  if ($(this).height() != 100)
    $(this).animate({
      height: 100
    }, 1000);
  else
    $(this).animate({
      height: 150
    }, 1000);
});

＆＃13;

.column {
  width: 114px;
  float: left
}
.box {
  height: 100px;
  width: 100px;
  border: 2px solid;
  margin-bottom: 10px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="columns"></div>
<div class="box">HELLO WORLD 1</div>
<div class="box">HELLO WORLD 2</div>
<div class="box">HELLO WORLD 3</div>
<div class="box">HELLO WORLD 4</div>
<div class="box">HELLO WORLD 5</div>
<div class="box">HELLO WORLD 6</div>
<div class="box">HELLO WORLD 7</div>
<div class="box">HELLO WORLD 8</div>
<div class="box">HELLO WORLD 9</div>
<div class="box">HELLO WORLD 10</div>

＆＃13;

＆＃13;

＆＃13;