我正在尝试使用流行的 masonry.js库,但所有 masonry 元素都相互重叠,而不是 masonry 风格。
我已经多次阅读文档,我确信答案就在某处,但我找不到。
jQuery('.grid').masonry({
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
itemSelector: '.grid-item'
});
.grid-sizer,
.grid-item {
width: 40%;
}
.gutter-sizer {
width: 4%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">
Some text here
</div>
<div class="grid-item">
Some Other here
</div>
<div class="grid-item">
Blah blah blah
</div>
<div class="grid-item">
asdfasdff
</div>
<div class="grid-item">
214421342143
</div>
<div class="grid-item">
Some text here
</div>
<div class="grid-item">
Some text here
</div>
<div class="grid-item">
Some text here
</div>
</div>
最佳答案
自己解决了。
我忘记添加 gutter-sizer
和 grid-sizer
html。
jQuery('.grid').masonry({
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
itemSelector: '.grid-item'
});
.grid-sizer,
.grid-item {
width: 40%;
}
.gutter-sizer {
width: 4%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="grid-item">
Some text here
</div>
<div class="grid-item">
Some Other here
</div>
<div class="grid-item">
Blah blah blah
</div>
<div class="grid-item">
asdfasdff
</div>
<div class="grid-item">
214421342143
</div>
<div class="grid-item">
Some text here
</div>
<div class="grid-item">
Some text here
</div>
<div class="grid-item">
Some text here
</div>
</div>
<script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
关于javascript - 为什么我的 masonry.js 元素相互重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52693506/