Question

使用float: left;我想从图像1转到图像2

我现在拥有的是：jsFiddle

到：

你能不能给我灵感，我可以避免差距？

Answer 1

我使用jQuery Isotope来获得结果http://isotope.metafizzy.co/。间隙空白太容易了：

<!doctype html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script>
  </head>
<body>

<div class="grid">
  <div class="grid-item item-size-A">1</div>
  <div class="grid-item item-size-C">2</div>
  <div class="grid-item item-size-D">3</div>
  <div class="grid-item item-size-B">4</div>
  <div class="grid-item item-size-A">5</div>
  <div class="grid-item item-size-C" style="height: 150px">6</div>
  <div class="grid-item item-size-C">7</div>
  <div class="grid-item item-size-B">8</div>
  <div class="grid-item item-size-A">9</div>
  <div class="grid-item item-size-A">10</div>
  <div class="grid-item item-size-D">11</div>
  <div class="grid-item item-size-C">12</div>
  <div class="grid-item item-size-B">13</div>
  <div class="grid-item item-size-A">14</div>
  <div class="grid-item item-size-C">15</div>
</div>
<style>
  * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }

  body {
      font-family: sans-serif;
  }

  .grid {
      background: #DDD;
      max-width: 900px;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding: 0;
      font-size: 50px;
      font-weight: 900;
  }

.grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid-item {
    float: left;
}

.item-size-A {
    background-color: red;
    width: 100px;
    height: 150px;
}
.item-size-B {
    background-color: blue;
    width: 200px;
    height: 150px;
}
.item-size-C {
    background-color: yellow;
    width: 100px;
    height: 300px;
}
.item-size-D {
    background-color: green;
    width: 300px;
    height: 300px;
}
</style>
<script>
$(document).ready( function() {

    $('.grid').isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: 100
        }
    });

});
</script>


</body>
</html>

jQuery Sortable：避免项目之间的差距（向左浮动）

1 个答案: