Javascript Isotope 和 Masonry jQuery 插件之间的差异

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8856893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 07:48:53  来源:igfitidea点击:

Differences between Isotope and Masonry jQuery plugins

javascriptjqueryjquery-pluginsjquery-masonryjquery-isotope

提问by Dónal

I recently discovered the Masonryand IsotopeJQuery plugins. They seem to be functionally almost identical and both appear to have the same author. The only obvious difference I can see is the license.

我最近发现了MasonryIsotopeJQuery 插件。它们似乎在功能上几乎相同,而且似乎都具有相同的作者。我能看到的唯一明显区别是许可证。

What are the main differences between these two in terms of functionality? Why would you use one over the other?

这两者在功能方面的主要区别是什么?你为什么要使用一个?

回答by PrimosK

An excerpt from the interview with the author:

摘自对作者的采访:

To some people Isotope would look very similar to the work you had previously done with Masonry; can you explain the main differences between the two?

Isotope has several features that Masonry lacks. Masonry essentially does one thing, placing item elements in a cascading arrangement. Isotope has Masonry's layout logic built in, but in addition, it also has several other layout modes that can be used to dynamically position elements. You can even develop your own custom layout mode.

As I've mentioned, it has filtering and sorting functionality built in. Filtering items is as easy as passing in a jQuery selector:

$('#container').isotope({ filter: '.my-selector' });

Isotope takes advantage of the best browser features out there. Instead of using typical left/top styles positioning, Isotope takes a progressive enhancement approach and uses CSS transforms if supported by the browser. This provides for top-notch performance for top-notch browsers. With hardware acceleration kicking in, animations look silky smooth on WebKit browsers, and even less-powerful devices using iOS. CSS transforms perform better with CSS transitions, which I'll discuss later.

对某些人来说,同位素看起来与您之前使用 Masonry 所做的工作非常相似;你能解释一下两者之间的主要区别吗?

同位素具有 Masonry 所缺乏的几个特性。Masonry 本质上只做一件事,将项目元素放置在级联排列中。Isotope 内置了 Masonry 的布局逻辑,但除此之外,它还有其他几种布局模式可用于动态定位元素。您甚至可以开发自己的自定义布局模式。

正如我所提到的,它内置了过滤和排序功能。过滤项目就像传入一个 jQuery 选择器一样简单:

$('#container').isotope({ filter: '.my-selector' });

Isotope 充分利用了目前最好的浏览器功能。Isotope 不使用典型的左/上样式定位,而是采用渐进式增强方法,并在浏览器支持的情况下使用 CSS 转换。这为一流的浏览器提供一流的性能。随着硬件加速的启动,动画在 WebKit 浏览器上看起来如丝般流畅,甚至在使用 iOS 的功能较弱的设备上。CSS 转换使用 CSS 转换效果更好,我将在稍后讨论。

Another difference is license as @AminAriana pointed out. Masonryis under the MIT license, but Isotopeis only free for personal use.

另一个区别是@AminAriana 指出的许可证。砌体是根据MIT许可证,而同位素是唯一免费供个人使用

You can buy (25$) Isotope commercial licenseon this page.

您可以在此页面上购买(25 美元)同位素商业许可证

回答by Ahrengot

PrimosK pretty much answared you question, but I just wanted to chime in ...

PrimosK 几乎回答了你的问题,但我只是想插一句......

Isotope is an awesome jQuery plugin. I've successfully used it on multiple sites.

Isotope 是一个很棒的 jQuery 插件。我已经在多个站点上成功使用了它。

One of the things I like most about Isotope is how customizable it is. It's well documented and it can do almost anything you can think of like extending it with infinite scroll and use custom layout modes.

我最喜欢 Isotope 的一件事是它的可定制性。它有很好的文档记录,它几乎可以做任何你能想到的事情,比如用无限滚动扩展它并使用自定义布局模式。