同位素砌体不能垂直堆叠可变高度的物品

有人可以解释我做错了什么，因为这个同位素插件的砌体布局对我来说工作不正确。为什么这些项目的行为像是在一排而不是堆砌砌体风格？同位素砌体不能垂直堆叠可变高度的物品

http://jsbin.com/vaposovuwo/edit?html,css,js

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 

    <div class="grid"> 

    <div class="grid-item"> 
     <h3>Hello how are you fdgdfg dfgdf gdf gdjadfhg dfga fgaf gad </h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto facilis fuga asperiores, eos, nam numquam illum placeat, cumque minus nihil, repellendus. Blanditiis quia similique architecto, obcaecati inventore magnam cupiditate molestias.</p> 
    </div> <!-- grid item --> 

    <div class="grid-item"> 
     <h3>Hello how are you</h3> 
     <p>Lorem ipsum dsf sdfs df sdfsdfsdfs dfsdfsdf sdfs d fsdolor sit amet, consectetur adipisicing elit. Iusto facilis fuga asperiores, eos, nam numquam illum placeat, cumque minus nihil, repellendus. Blanditiis quia similique architecto, obcaecati inventore magnam cupiditate molestias.</p> 
    </div> <!-- grid item --> 

    <div class="grid-item"> 
     <h3>Hello how are you</h3> 
     <p>Lorem ipsum dolor sit adsfsd dsfsd met, consectetur adipisicing elit. Iusto facilis fuga asperiores, eos, nam numquam illum placeat, cumque minus nihil, repellendus. Blanditiis quia similique architecto, obcaecati inventore magnam cupiditate molestias.</p> 
    </div> <!-- grid item --> 

    <div class="grid-item"> 
     <h3>Hello how asdf sdf sdf sdhgdtjhdghgdf fgd fre you</h3> 
     <p>Lorem ipsum dolor sit amet, cons fdag adfag fda gadfgadf gadfg adf gadgad gadgad gad gagadf ectetur adipisicing elit. Iusto facilis fuga asperiores, eos, nam numquam illum placeat, cumque minus nihil, repellendus. Blanditiis quia similique architecto, obcaecati inventore magnam cupiditate molestias.</p> 
    </div> <!-- grid item --> 

    <div class="grid-item"> 
     <h3>Hello how are you</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto facilis fuga asperiores, eos, nam numquam illum placeat, cumque minus nihil, repellendus. Blanditiis quia similique architecto, obcaecati inventore magnam cupiditate molestias.</p> 
    </div> <!-- grid item --> 

    <div class="grid-item"> 
     <h3>Hello how are df gdf gdfhjtrhtrtrt hrhrt hrt rtyyou</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto facilis fuga asperiores, eos, nam numquam illum placeat, cumque minus nihil, repellendus. Blanditiis quia similique architecto, obcaecati inventore magnam cupiditate molestias.</p> 
    </div> <!-- grid item --> 

    <div class="grid-item"> 
     <h3>Hello how are you</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto facilis fuga asperiores, eos, nam numquam illum placeat, cumque minus nihil, repellendus. Blanditiis quia similique architecto, obcaecati inventore magnam cupiditate molestias.</p> 
    </div> <!-- grid item --> 
    </div> 

    <script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script> 

</body> 
</html>

CSS

.grid-item { 
    width: 300px; 
    background-color: tomato; 
    padding: 15px; 
    margin: 15px; 
    float: left; 
}

$(document).ready(function(){ 

    $('.grid').isotope({ 
    itemSelector: '.grid-item', 

    }); 

});

来源

2017-04-10 eliHimself

最重要的是，你的jsbin没有jQuery的加载，你还增加isotope.js的两倍，以及因为试图添加fit-columns.js，但它不在脚本标记中。

这是你拥有的一切：

<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script> 
//npmcdn.com/[email protected]/fit-columns.js

这是你需要具备什么：

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script> 
<script src="http://npmcdn.com/[email protected]/fit-columns.js"></script>

来源

2017-04-10 15:48:01 Macsupport

同位素砌体不能垂直堆叠可变高度的物品

回答

相关问题