Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
  <button id="float">use float</button>
  <button id="flex">use flex</button>
  <button id="flex-auto">use flex auto</button>
  <button id="flex-js">use flex with js hack</button>
​
  <div class="ball-list-wrap">
    <div class="ball-list">
      <div class="ball">1</div>
      <div class="ball">2</div>
      <div class="ball">3</div>
      <div class="ball">4</div>
      <div class="ball">5</div>
      <div class="ball">6</div>
      <div class="ball">7</div>
      <div class="ball">8</div>
      <div class="ball">9</div>
      <div class="ball">10</div>
      <div class="ball">11</div>
      <div class="ball">12</div>
      <div class="ball">13</div>
      <div class="ball">14</div>
      <div class="ball">15</div>
      <div class="ball">16</div>
      <div class="ball">17</div>
      <div class="ball">18</div>
      <div class="ball">19</div>
      <div class="ball">20</div>
      <div class="ball">21</div>
      <div class="ball">22</div>
      <div class="ball">23</div>
      <div class="ball">24</div>
      <div class="ball">25</div>
      <div class="ball">26</div>
      <div class="ball">27</div>
      <div class="ball">28</div>
      <div class="ball">29</div>
      <div class="ball">30</div>
      <div class="ball">31</div>
      <div class="ball">32</div>
      <div class="ball">33</div>
    </div>
  </div>
</body>
</html>
 
.ball-list-wrap {
    width: 360px;
    border: 1px solid #aaa;
}
.ball-list {
  margin-right: -8px;  
  font-size: 0;
​
  .ball {
    display: inline-block;
    width: 28px;
    line-height: 28px;
    height: 28px;
    margin: 10px 8px 0 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
​
  }
​
  &.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    
    -moz-box-lines: multiple;
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    
    // space-between old, mid 值都是 justify
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
​
    .ball {
        // 兼容旧浏览器，子元素必须是块元素
        display: block;
    }
  }
  &.flexauto {
    .ball:last-child {
      margin-right: auto;
    }
  }
}
 
var float = document.querySelector('#float');
​
var flex = document.querySelector('#flex');
​
var flexAuto = document.querySelector('#flex-auto');
​
var flexHack = document.querySelector('#flex-js');
​
var ballList = document.querySelector('.ball-list');
​
​
float.addEventListener('click', function () {
  ballList.classList.remove('flex', 'flexauto')
}, false);
​
​
flexAuto.addEventListener('click', function () {
  ballList.classList.add('flex', 'flexauto');
}, false);
​
​
flex.addEventListener('click', function () {
  ballList.classList.remove('flexauto');
  ballList.classList.add('flex');
}, false);
​
flexHack.addEventListener('click', function () {
  if (ballList.classList.contains('flex')) {
    return;
  }
​
  ballList.classList.add('flex');
  
  var width = parseFloat(window.getComputedStyle(ballList).width);
​
  var cols = Math.floor((width + 8) / 38);
  
  var remainCols = cols - 33 % cols;
​
  var fragment = document.createDocumentFragment();
​
  for (var i = 0; i < remainCols; i++) {
    var itag = document.createElement('i');
​
    itag.className = 'ball';
    
    fragment.appendChild(itag);
  }
  
  ballList.appendChild(fragment);
​
}, false);
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers