Fizz buzz jquery down然后跨越

Question

我一直在给jquery fizz buzz请求过滤输出down然后跨过那里有100个结果，它们需要存储在10x10网格中，我没有大声使用桌子和我的生活我无法弄清楚！

  $(document).ready(function() { 

      var fizzbuzzList = $('#fizzbuzz-list'); 

      for (var i = 1; i <= 100; i++) { 
       var output = i; 
       // if i is divisible by 3 
       if (i % 3 === 0) { 
        output = '<div class="fizz">fizz</div>'; 
       } 
       // if i is divisible by 5 
       if (i % 5 === 0) { 
        output = '<div class="buzz">buzz</div>'; 
       } 
       // if i is not divisble by 3 or 5 
       if (i % 15 === 0) { 
        output = '<div class="fizzbuzz">fizz buzz</div>'; 
       } 

       fizzbuzzList.append($('<div class="output">' + output + '</div>')); 
      } 

     }); 

    <div id="fizzbuzz-list"></div> 

Answer 1

如果我明白你要做什么，你想在第一列1-10，第二列11-20，等等？您应该可以使用flexbox轻松完成此操作。

基于外壳10-高和10-宽固定宽度的“输出”元素在父容器#fizzbuzz-list上设置固定的高度和宽度，并使用列布局将其配置为柔性盒。

这应做到：

var fizzbuzzList = document.getElementById("fizzbuzz-list"); 
 

 
for (var i = 1; i <= 100; i++) { 
 
    var output = i; 
 
    // if i is divisible by 3 
 
    if (i % 3 === 0) { 
 
    output = '<div class="fizz">fizz</div>'; 
 
    } 
 
    // if i is divisible by 5 
 
    if (i % 5 === 0) { 
 
    output = '<div class="buzz">buzz</div>'; 
 
    } 
 
    // if i is not divisble by 3 or 5 
 
    if (i % 15 === 0) { 
 
    output = '<div class="fizzbuzz">fizz buzz</div>'; 
 
    } 
 
    
 
    fizzbuzzList.innerHTML = fizzbuzzList.innerHTML + '<div class="output">' + output + '</div>'; 
 
}

#fizzbuzz-list { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    justify-content: flex-start; 
 
    align-items: flex-start; 
 
    align-content: flex-start; 
 
    height: 420px; /* sized for 10 elements @40px high + 2px of borders */ 
 
    width: 420px; /* sized for 10 elements @40px wide + 2px of borders */ 
 
} 
 

 
.output { 
 
    height: 40px; 
 
    width: 40px; 
 
    border: 1px solid #000000; 
 
}

<div id="fizzbuzz-list"></div>

但是你想，你可以很明显的风格箱;我保持简单。我也调整了你的JavaScript到vanilla，所以它运行在嵌入式代码片段中（如果它可以使用jQuery，我不完全熟悉嵌入代码片段）。

最后一件事，如果您需要支持旧浏览器（尤其是IE），则可能需要为flexbox CSS包含一些浏览器前缀规则。您可以在https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties找到很多很好的CSS flexbox信息，并且您还可以在http://zomigi.com/blog/flexbox-syntax-for-ie-10/找到一些较早的IE特定语法。

希望这一切都有帮助！