砌体能否使用RTL（从右到左）方向？

Question

Masonry在从左到右的文本方向（LTR）下工作得很好。现在我想要将masonry与从右到左的文本方向（RTL，中东语言如希伯来语和阿拉伯语通常是从右到左书写）一起使用。

每当我在从右到左（RTL）文本方向上运行masonry时，masonry插件以从左到右（LTR）的格式设置其所有网格布局。

我还查看了masonry插件的文档，但没有找到任何与从右到左（RTL）方向相关的设置。

有什么建议的解决方法吗？

- Dawood Butt

---

提示：请查看 isOriginLeft 选项。 - Daniel A. White

Answer 1

我认为isOriginLeft: false是正确的答案，根据这个网站。

- Moe Far

---

isOriginLeft: false，这对我有用。 - Shahab Younas

Answer 2

你可以在 CSS 中将项目向右浮动：

.masonry .item {
  float: right;
}

然后在您的JavaScript中更改选项isOriginLeft：false。

这里有一个小的CodePen示例：

http://codepen.io/anon/pen/gkCiG

- Jeffrey Jenkinson

---

这份文档记录得真是糟糕透了。这个解决方案虽然可行，但官方文档中所述的“isRTL:true”并不能起作用。实际上，在源代码中根本找不到这个选项。 - deweydb

Answer 3

虽然晚了两年，但我也遇到了同样的问题，并找到了Masonry提供的解决方案。

有一个选项isRTL可以将瓷砖从右到左排列：

$('.tile-view').masonry({ 
    columnWidth: 200,
    isRTL: true
});

- MostafaR

---

根据砌体文档，选项originLeft将从左到右排列项目：$('selctor').masonry({ originLeft: false }); - Akshay Gundewar

Answer 4

OriginLeft

控制布局的水平流动。默认情况下，项目元素从左侧开始定位，使用 originLeft: true。对于从右到左的布局，请设置 originLeft: false。

originLeft: false

- Amr Ibrahim

Answer 5

如果您想要从右到左的布局，特别是当您的内容包含图像时；例如可能包含图像的Bootstrap卡片。那么可以使用这段代码片段来获取帮助。

注意：您需要两个库，Masonry和imagesLoaded：

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

//See docs: https://masonry.desandro.com/layout.html#imagesloaded
//See demo: https://codepen.io/desandro/pen/MwJoLQ
var grid = document.querySelector('.masonry');
var msnry;

imagesLoaded(grid, function () {
    // init Isotope after all images have loaded
    msnry = new Masonry(grid, {
        // options
        percentPosition: true,
        originLeft: false
    });
});

此外，考虑到在Bootstrap 5中移除砌体布局，上述内容可能对那些朋友是一个很好的指南。

- Alireza Rezaee