jquery - 如果前面的 li 有更高的高度，就会出现一些空白

Question

我有一些 <li>看起来像一些框列表。

截图

列表

<ol id="selectable">
    <li class="ui-state-default" id="1"></li>
    <li class="ui-state-default" id="2"></li>
    <li class="ui-state-default" id="3"></li>
    <li class="ui-state-default" id="4"></li>
    <li class="ui-state-default" id="5"></li>
    <li class="ui-state-default" id="6"></li>
    <li class="ui-state-default" id="7"></li>
    <li class="ui-state-default" id="8"></li>
    <li class="ui-state-default" id="9"></li>
    <li class="ui-state-default" id="10"></li>
    <li class="ui-state-default" id="11"></li>
    <li class="ui-state-default" id="12"></li>
</ol>

CSS

#selectable { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      width: 450px; 
}
#li .handle { 
      background: #f8f8f8; 
      position: absolute; 
      left: 0; 
      top: 0; 
      bottom: 0; 
      padding:8px; 
}
#selectable li { 
      margin: 3px; 
      padding: 1px; 
      float: left; 
      width: 100px; 
      height: 80px; 
      font-size: 4em; 
      text-align: center; 
}

我会动态地改变一些 li 的高度搞砸了

参见 fiddle .在这里，我正在合并选定的框。尝试选择 4 和 8 您会看到问题。

截图

我需要的是:

1. 我想用 4 和 5

填充空白区域

2. 只有当框具有相同宽度(如果垂直选择)并且只有框具有相同高度(如果水平选择)时，选择才适用

Answer 1

尝试砌体

My codepen (是官方例子的一个fork)

Simple result (没有js按钮)

Your jsfiddle modify (当你点击应用时。如果你想要拖放时的结果，请在 var merge 中应用 mansonry)

HTML

<h1>Masonry - destroy</h1>
<p><button id="toggle-button">Toggle Masonry</button>
<ul class="masonry">

  <li class="item w2 h3">1</li >
  <li class="item w2 h3">2</li >
  <li class="item w2 h2">3</li >
  <li class="item w2 h3">4</li >
  <li class="item w2 h3">5</li >
  <li class="item w2 h3">6</li >

</ul>

JS

// http://masonry.desandro.com/masonry.pkgd.js added as external resource

docReady( function() {

  var container = document.querySelector('.masonry');
  var button = document.querySelector('#toggle-button');
  var msnry = new Masonry( container, {
    columnWidth: 200


 });

  var isActive = true;

  eventie.bind( button, 'click', function() {
    if ( isActive ) {
      msnry.destroy();
    } else {
      msnry = new Masonry( container );
    }
    isActive = !isActive;
  });

});