当前位置：首页 > 网页特效 > 其他

Isotope-jQuery神奇的分类过滤和排序布局插件

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>  
```          
#####  CSS样式
用于分类过滤和排序的items需要你手动添加CSS样式：
```html

.item { width: 25%; }
.item.w2 { width: 50%; }    
```            
#####  初始化插件
可以通过jQuery来初始化一个Isotope实例：

```html
$('#container').isotope()                
var $container = $('#container');
// init
$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'fitRows'
});          
```     
##### imagesLoaded
如果在items中使用图片，而图片加载错误时Isotope的布局会发生错乱。解决这个问题的方法时使用imagesLoaded。imagesLoaded可以在所有的图片都被加载之后触发一个回调函数。

```html
// initialize Isotope after all images have loaded
var $container = $('#container').imagesLoaded( function() {
  $container.isotope({
    // options
  });
});                
// or with vanilla JS
var container = document.querySelector('#container');
var iso;
// initialize Isotope after all images have loaded
imagesLoaded( container, function() {
  iso = new Isotope( container, {
    // options
  });
});      
```          
或者先初始化Isotope，然后在图片加载完成之后再设置布局：

```html
// initialize Isotope
var $container = $('#container').isotope({
  // options
});
// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});                
// or with vanilla JS
// initialize Isotope
var iso = new Isotope( container, {
  // options
});
// layout Isotope again after all images have loaded
imagesLoaded( container, function() {
  iso.layout();
});                
```
#####  Vanilla JavaScript
Isotope并不一定需要jQuery。你可以通过纯js来使用Isotope。

可以通过new Isotope( element, options )方法来初始化一个Isotope对象实例。Isotope构造器接收两个参数：一个容器元素和一个参数选项对象。

```html
var container = document.querySelector('#container');
// init
var iso = new Isotope( container, {
  // options
  itemSelector: '.item',
  layoutMode: 'fitRows'
});       
```         
容器元素可以是一个选择器字符串或一个单独的元素：

```html
var iso = new Isotope( '#container', {
  // options
});   
```             
#####  使用HTML元素来初始化
你可以直接在html中初始化Isotope，不用任何的javascript。在容器元素上添加class js-isotope。参数可以通过一个data-isotope-options属性来给定。

```html
<div id="container" class="js-isotope"
  data-isotope-options='{ "columnWidth": 200, "itemSelector": ".item" }'>   
```             
在HTML中设置的参数选项必须是可用的json格式数据，Keys需要双引号引起来，例如："itemSelector":。注意：外部的HTML属性值使用单引号引起来，json使用双引号。

Isotope有大量的参数、方法及及事件，以及布局方式，请点击下面的链接查看详细的文档介绍。

web299.com

Isotope-jQuery神奇的分类过滤和排序布局插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果