jQuery分类过滤和排序布局插件Isotope

jQuery分类过滤和排序布局插件Isotope

Isotope是一款效果非常神奇的元素分类过滤和排序布局jQuery插件。
0
  • 详情内容
  • 留言点评

Isotope是一款效果非常神奇的元素分类过滤和排序布局jQuery插件。Isotope是Masonry布局的作者David DeSandro的一款力作,该分类过滤和排序插件允许你以非常简单和炫酷的方式来隐藏和显示元素,以及对元素按照指定的规则进行排序。Isotope可以设置多种布局方式:masonry布局(瀑布流)、水平布局、垂直布局、适合行布局、适合列布局等等。

注意:Isotope不是完全免费的软件。用于商业用途时需要向作者购买。作为非商业用途使用时,在遵循 GPL v3 License 规范的前提下,你可以自由使用该插件。

Isotope元素分类过滤和排序插件的HTML结构非常简单:使用一个包裹容器来包装一组用于分类过滤和排序的元素。

<div id="container">

  <div class="item">...</div>

  <div class="item w2">...</div>

  <div class="item">...</div>

  ...

</div> 

用于分类过滤和排序的items需要你手动添加CSS样式:

.item { width: 25%; }

.item.w2 { width: 50%; } 

初始化插件,可以通过jQuery来初始化一个Isotope实例:

$('#container').isotope()               

var $container = $('#container');

// init

$container.isotope({

  // options

  itemSelector: '.item',

  layoutMode: 'fitRows'

});        

   

20180826192742.png

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看

老铁,别说没提醒你,双11期间实体店消费,先用手机支付宝搜索“7629723”可以抢红包,玩法已限时升级,红包种类和金额都更嗨咯