Question

Masonry在LTR（从左到右）的文字方向上运行良好。现在我想使用masonry文本方向RTL（从右到左[中东语言，如希伯来语和阿拉伯语主要是从右到左书写。]）。

每当我在masonry文字方向上运行RTL (Right-To-Left) 时，masonry插件就会以LTR（从左到右）格式设置其所有网格布局。

我也会从masonry插件的文档中查看，但没有找到与RTL (Right-To-Left) 方向相关的任何设置。

任何建议的解决方案？

Answer 1

您可以将项目浮动在css：

中

.masonry .item {
  float: right;
}

然后在您的javascript中更改选项isOriginLeft: false。

这是一个小代码来说明：

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

Answer 2

根据this网站

，我认为isOriginLeft: false是正确的答案

Answer 3

它已经晚了两年，但我遇到了同样的问题，并找到了由Masonry提供的解决方案。

有一个选项isRTL可以从右到左排列拼贴：

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

Answer 4

<强> OriginLeft

控制布局的水平流程。默认情况下，item元素从左侧开始定位，originLeft：true。为从右到左的布局设置originLeft：false。

originLeft: false

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
    });
});

另外，考虑到removal of Masonry from Bootstrap 5，以上内容可能对那些朋友来说是一个很好的指南。

砌体可以用作RTL（从右到左）的方向

5 个答案: