jQuery筛选和排序插件– ISOTOPE

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量269 收藏
点赞数
文章标签： javascript ViewUI

jQuery筛选和排序插件-ISOTOPE

演示 首页

插件详细信息
名称 jQuery筛选和排序插件– ISOTOPE
描述 Isotope是一个精美的jQuery插件，用于神奇的布局，它对于动画和排序来说绝对是最好的选择，并且由jQuery提供支持。
关键词 排序 过滤 动画
执照 未指定，请参阅插件文档以获取许可证。
依存关系 未指定，请参阅插件文档以了解插件依赖性。
jQuery版本 1.8.2、1.8.1、1.8.0、1.7.2、1.7.1、1.7.x，1.6.4、1.6.3、1.6.x，1.4.x
作者 戴维·德桑德罗（David DeSandro）
添加日期 2012-11-11

From: https://www.sitepoint.com/jquery-filter-sort-plugin-isotope/

dingshi7798
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery插件-智能布局-isotope
04-12
NULL 博文链接：https://ollevere.iteye.com/blog/1707244
Isotope分类过滤和排序插件
11-24
**Isotope分类过滤和排序插件** Isotope是一款强大的JavaScript库，主要用于创建动态、响应式的网格布局系统。它提供了一套完整的解决方案，用于在网页上实现灵活的元素分类、过滤和排序功能，常用于图像画廊、产品...
我的前5个jQuery筛选器和排序插件
06-02 132
有用于过滤和排序这么多的jQuery插件，但这里是我目前的最爱，它提供了多种功能和效果五位。 同位素 一个精致的jQuery插件为神奇的布局。 使过滤，排序，以及动态布局。 2. MixItUp 甲jQuery插件提供动画过滤和排序 3. TinySort 一个小而简单的jQuery插件 ，将通过它的文本或属性值，或者它的孩子中的一个排序任何NODETYPE。 签出演示 ...
html用JavaScript和JQuery对<table>排序+筛选
程序员养成计划
11-04 1165
使用方法: 1、引入jquery.js文件 2、引入order-filter.js文件 3、给table添加class=“order-filter” 源码: &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt; &lt;script src="order-filter.js"&...
jQuery插件——Isotope
haoge397521的博客
11-21 1902
Isotope是一个优秀的jQuery插件能够对一组页面元素进行排序并创建智能布局。利用这个插件，能够对任意给定的一组元素用显示/隐藏效果进行过滤并且可以用花俏的动画进行重新排序。这个插件的布局功能非常强大。利用一个简单的功能，元素集将被转换成水平或垂直布局或智能地分布在一个网格中，在布局时都会伴随有漂亮的动画效果。
瀑布流布局使用详解——JQuery插件Isotope（动态实现子项目筛选）
weixin_30293079的博客
05-21 822
　　瀑布流布局，听起来听牛逼的样子，其实就是简单的子元素筛选功能。不过这一功能在网站页面布局当中还是很常用的，特别是在电商网站中 经常会有点一个钮筛选，然后页面的子元素刷的以下变了样。接下来，我们先简单介绍下概念和用法，然后详解这一功能的实现。 　　瀑布流概念： 　　　　又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为多栏布局，附带筛选功能，当下在国内十分流行。 ...
Isotope 基于jQuery的智能布局插件实例大全.zip
11-16
《Isotope：基于jQuery的智能布局插件实例详解》 在网页设计中，灵活多变的布局方式往往能提升用户体验，使网站更具吸引力。Isotope是一款强大的jQuery插件，它为网页设计师提供了智能布局的功能，使得元素能够在...
isotope jquery 智能布局特效
05-11
1. **引入资源**：首先，在网页中引入 jQuery 库和 Isotope 插件的 JavaScript 文件，以及相应的 CSS 样式表。 2. **HTML 结构**：设置好要应用 Isotope 的 HTML 元素，通常是一个包含多个子元素的容器，每个子元素...
Prolix:利用 Isotope Jquery 插件的 Wordpress 主题
06-12
"Prolix"是一款基于Isotope Jquery插件的Wordpress主题，专为创建现代、响应式的网站设计而设计。这款主题充分利用了Isotope的功能，提供了一种动态布局和过滤选项，使得内容展示既美观又易用。在深入探讨Prolix主题...
Bootstrap （五）isotope 过滤
我知道你很急,但是路要一步步走
03-28 621
下面有个坑，敲代码的时候一定要小心，楼主就在这个问题上卡了好久 data-filter 里面的值前面有个点 . 以便下面 js 调用， 下面js里isotope 的语法 filter : filterValue，这个 filterValue 是带 . 的 html <div class="filter text-center"> <ul class="nav n...
瀑布流布局isotope.js
04-13
实现html瀑布流布局，亲测可以使用，用法: $(function(){ //需要瀑布流布局的容器 var $container = $(".float-wrap"); $container.imagesLoaded( function(){ $container.isotope({ isResizableL:true, //瀑布流布局子对象 itemSelector :'.item' }); }); });
Isotope------这是一个神奇的layout(翻译介绍)
Focus-Fe
10-24 697
之所有做这个是因为我个人很赞这个plugin,所以决定翻译官网的所有东西，给大家一起分享一下。   1. 简介（Introduction）   Isotope ------一个精美而神奇的jQuery的layouts插件。   2. 功能（Features）   layout 模式：智能化，不能只用css简单地实现的动态layouts 过滤：简单地用jQuery的选择器隐...
isotope自动布局
d945332077的专栏
08-07 1万+
HTML5应用开发：神奇的动态布局库isotope教程 1. isotope介绍 Isotope 是一个jQuery的插件，用来实现精美的动态元素布局。可以到http://isotope.metafizzy.co/demos/elements-complete.html了解一下大概情况。 Isotope可以实现仅仅依靠CSS3无法实现的动态布局方式，可以动态添加，删除，排序，筛选元素。Iso
JQuery filter() 方法 筛选满足条件的数字
qq_40673345的博客
07-30 7170
var datas = [ { "name": "商品房", "bianma": "11" }, { "name": "商铺", "bianma": "12" } ] var data= datas.filter(function(item){ ret
对json数组进行排序和filter过滤
热门推荐
kongjiea笔记
01-19 1万+
对json数组进行排序和filter过滤 var data = [ {recordId: 10, recordNo: "PPCZ_", userId: 1, recordType: 9, recordCode: "", recordInMoney: 1111}, {recordId: 5, recordNo: "PPCZ_20170105170203", userId: 1, re
jquery插件-自动布局-masonry
ollevere的专栏
10-29 142
  示例：
jQuery基础——DOM
m0_54066656的博客
08-27 2007
JQ基础——DOM操作
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 1665
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
html5 网格排列图片,jQuery图片和HTML元素网格布局插件
05-15
有很多种方式可以实现网格排列图片和HTML元素布局。以下是两个比较流行的解决方案： 1. 使用CSS网格布局 HTML5引入了一种新的布局模式：CSS网格布局。使用CSS网格布局，可以轻松地创建网格式布局，而无需使用大量的嵌套元素和复杂的样式。 以下是一个使用CSS网格布局排列图片的示例代码： ```HTML <div class="grid-container"> <div class="grid-item"><img src="image1.jpg"></div> <div class="grid-item"><img src="image2.jpg"></div> <div class="grid-item"><img src="image3.jpg"></div> <div class="grid-item"><img src="image4.jpg"></div> <div class="grid-item"><img src="image5.jpg"></div> <div class="grid-item"><img src="image6.jpg"></div> </div> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } .grid-item { border: 1px solid #ccc; padding: 10px; text-align: center; } .grid-item img { max-width: 100%; } </style> ``` 在上面的代码中，我们首先创建了一个包含六个元素的父容器，并将其设置为网格布局。然后，我们使用 `grid-template-columns` 属性定义了三列，并使用 `repeat` 函数指定每列的大小。接下来，我们使用 `grid-gap` 属性添加了网格间隔。最后，我们定义了每个网格元素的样式，包括边框、内边距和居中对齐的图片。 2. 使用jQuery插件 除了CSS网格布局之外，还有许多jQuery插件可以帮助您轻松地创建网格式布局。其中一种流行的插件是Isotope，它允许您动态地排列和过滤各种类型的元素，包括图像、文本和视频。 以下是一个使用Isotope插件创建图像网格布局的示例代码： ```HTML <div class="grid"> <div class="grid-item"><img src="image1.jpg"></div> <div class="grid-item"><img src="image2.jpg"></div> <div class="grid-item"><img src="image3.jpg"></div> <div class="grid-item"><img src="image4.jpg"></div> <div class="grid-item"><img src="image5.jpg"></div> <div class="grid-item"><img src="image6.jpg"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script> <script> $(document).ready(function() { $('.grid').isotope({ itemSelector: '.grid-item', layoutMode: 'fitRows', percentPosition: true }); }); </script> ``` 在上面的代码中，我们首先创建了一个包含六个元素的父容器，并将其设置为 `grid` 类。然后，我们使用Isotope插件将其转换为可过滤和排序的网格。在脚本中，我们使用 `itemSelector` 属性指定了网格元素的选择器，并使用 `layoutMode` 属性指定了网格布局模式。最后，我们使用 `percentPosition` 属性定义了每个元素的百分比位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值