的jQuery可排序：避免

項目之間的間隙（浮動左）使用float: left;我想去從圖像1到圖像2的jQuery可排序：避免

什麼我現在是：jsFiddle

到：

您能否給我一些啓發，以便我能夠避免缺口？

2016-02-17 Alteyss

好像你鏈接到一個私人小提琴。 – Phiter

我用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>

來源

2016-02-17 16:27:29

的jQuery可排序：避免

回答

相關問題