Jquery-Masonry几乎总是空的空间

前端之家收集整理的这篇文章主要介绍了Jquery-Masonry几乎总是空的空间前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在尝试砌体,但不能让它完全按照我的意愿工作.我使用的元素在宽度和高度上有所不同,但都适合网格(4种不同的尺寸,所有倍数最小的边距).我还计算了一个可以精确拟合的元素分布(最小的7个,其他4个).

然而,砌体能够整齐地适应它们是罕见的,有时会有一个潜伏在底部,有时几个是错位的.总是如此,在一个视图中,我可以看到需要移动哪些物品才能适合它.

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

解决方法

您应该看看砌体的“大哥”Isotope here.请注意,如果您有按特定顺序排序或按特定顺序固定的元素 – 并且宽度超过单个列宽 – 它们可以“阻止”浏览器宽度较窄的列.

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

<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; }
原文链接:https://www.f2er.com/jquery/175731.html

猜你在找的jQuery相关文章