gpt4 book ai didi

Jquery-Masonry 几乎总是空白

转载 作者:行者123 更新时间:2023-12-04 11:28:03 27 4
gpt4 key购买 nike

我一直在尝试 Masonry,但无法完全按照我的意愿工作。我使用的元素的宽度和高度各不相同,但都适合一个网格(4 种不同的尺寸,所有最小+边距的倍数)。我还计算了可以精确拟合的元素分布(最小的 7 个,所有其他元素的 4 个)。

然而,砖石很少能将它们整齐地安装在一起,有时底部潜伏着一个,有时放错了几个地方。总是这样,在一个 View 中,我可以看到需要移动哪些项目才能适合它。

有没有办法让砌体在移动元素中更具侵略性?或者让它重复两次以确保没有空格?

最佳答案

你可能应该看看砌体的“大哥”同位素here .请注意,如果您有按特定顺序排序或按特定顺序固定的元素 - 并且比单个列宽更宽 - 它们可以在较窄的浏览器宽度上“阻塞”一列。

enter image description here

编辑 也许 this fiddle解释得更好一点。如果您查看那个,并且在观察 div 中的数字时-您会看到向上的下一个砌体元素(红色元素 5)不可能放入白色方块中,因为它必须在元素 4 之后;所以它必须结束的地方意味着,只有三行适合,有一个白色间隙。也许您可以使用 Isotope 的 shuffle 和/或 reLayout 方法并牺牲以严格顺序排列元素?最好是解决您的问题的 jsfiddle。

<article>
<div class="tile blue"><p>1</p></div>
<div class="tile black"><p>2</p></div>
<div class="tile tall yellow"><p>3</p></div>
<div class="tile grey"><p>4</p></div>
<div class="tile wide red"><p>5</p></div>
<div class="tile green"><p>6</p></div>
<div class="tile grey"><p>7</p></div>
<div class="tile blue"><p>8</p></div>
<div class="tile green"><p>9</p></div>
</article>
$('article').isotope({
itemSelector : '.tile',
masonry: {
columnWidth: 100
}
});
article .tile {
display: block;
float: left;
box-sizing: border-box;

width: 100px;
height: 100px;

font-size: 3em;
font-weight: 700;

padding: 0 6px;
color: #fff;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

border:1px dotted black;
}

article .tile.wide {
width: 200px;
}

article .tile.tall {
height: 200px;
}

.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }

关于Jquery-Masonry 几乎总是空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11695574/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com