如何使用同位素 js 获得这种特定的砌体布局(仅关闭一个网格项!)?
How to get this specific masonry layout with isotope js (only one grid item off!)?
我确定您听说过 isotope.js,但这里是项目的一部分 link:https://isotope.metafizzy.co/layout-modes/masonry.html
这是我想要的所需布局的图像:
这是我能得到的最接近布局的代码笔:https://codepen.io/levijosman/pen/GdewvN
我试过更改项目的顺序(基于布局宽度),切换到不同的布局模式(如 Packery)。如您所见,我与预期的布局只有一个网格项目。布局必须可以使用 isotope.js 还是根本不行?
<h1>Isotope - masonry layout mode</h1>
<div class="container">
<div class="grid">
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>
.grid-item {
float: left;
width: 313.81px;
height: 200px;
margin-left: 10px;
margin-bottom: 10px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 637.64px; }
.grid-item--height2 { height: 410px; }
看来主要问题出在javascript中的itemSelector
;它应该有 .grid-item
而不是 masonry
,像这样:
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100,
gutter: 8
}
});
然后它应该按预期流动,你只需要在大盒子后面用另一个 grid-item
div
替换你的 grid-item--height2
class:
<div class="grid">
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
我确定您听说过 isotope.js,但这里是项目的一部分 link:https://isotope.metafizzy.co/layout-modes/masonry.html
这是我想要的所需布局的图像:
这是我能得到的最接近布局的代码笔:https://codepen.io/levijosman/pen/GdewvN
我试过更改项目的顺序(基于布局宽度),切换到不同的布局模式(如 Packery)。如您所见,我与预期的布局只有一个网格项目。布局必须可以使用 isotope.js 还是根本不行?
<h1>Isotope - masonry layout mode</h1>
<div class="container">
<div class="grid">
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>
.grid-item {
float: left;
width: 313.81px;
height: 200px;
margin-left: 10px;
margin-bottom: 10px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 637.64px; }
.grid-item--height2 { height: 410px; }
看来主要问题出在javascript中的itemSelector
;它应该有 .grid-item
而不是 masonry
,像这样:
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100,
gutter: 8
}
});
然后它应该按预期流动,你只需要在大盒子后面用另一个 grid-item
div
替换你的 grid-item--height2
class:
<div class="grid">
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>