带排序功能的js masonry瀑布流插件

news/2025/2/23 14:08:05/文章来源:https://www.cnblogs.com/mybook000/p/18567124

在线预览   下载

 

sortableJs是一款带排序功能的js masonry瀑布流插件。sortableJs能够使元素以卡片形式显示,并以masonry瀑布流方式进行布局,通过点击分类按钮,可以将卡片按指定的方式动态排序。

 

 使用方法

在页面中引入sortable.min.css和sortable.min.js文件。

< link rel="stylesheet" href="path/to/sortable.min.css">
< script src="path/to/sortable.min.js">  
 HTML结构

使用sortableJs的基本HTML结构如下:

< ul >< li >< a data-sjslink="food"> [...] < li >< a data-sjslink="development"> [...] < div id="sortable" class="sjs-default">< div data-sjsel="food"> [...] < div data-sjsel="development"> [...] < div data-sjsel="development"> [...] 
  

1、使用无序列表插件一组元素,每个链接都添加一个data-sjslink属性,指向要操作的分类元素。

2、将同一种类的元素包裹在data-sjsel属性的块级元素中。

3、将所有的块级元包裹子啊sjs-default容器中,并指定一个id。

 JavaScript

最后,在页面DOM元素加载完毕之后,通过sortablejs()方法来初始化插件。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/840763.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenDaylight安装和配置

环境: Ubuntu 14.04.6 LTS (GNU/Linux 4.4.0-142-generic x86_64) 注意,需要确保虚拟机中安装有jdk root@UbuntuDesktop:~# java -version java version "1.8.0_151" Java(TM) SE Runtime Environment (build 1.8.0_151-b12) Java HotSpot(TM) 64-Bit Server VM (b…

如何测试一根网线传输质量

我心里有个疑问,一根成品网线或者自己制作的网线传输质量到底好不好,应该如何判断?这些网线速度到底如何是拿测线器测不出来的,毕竟测线器只能测试线路的通断,但线路质量是测试不出的。 我们也没有高大上的福禄克设备毕竟对于家里的几根线,动用这么专业高价的设备也不值当…

leetcode240

leetcode240思路:我们将矩阵逆时针旋转45度,可以发现矩阵变成了一个二叉搜索树,往左走是小,往右走是大。这样就能以matrix[0] [j]为根开始搜索。class Solution {//10:20~10:28public boolean doSearch(int[][] matrix,int i,int j,int target){if (i>=matrix.length||i…

能不能用uni开发一个线上运动会的APP、小程序?

引言:uni-app凭借其强大的跨平台能力,成为开发AI运动类APP和小程序的首选框架。本文旨在探讨基于uni进行开发AI运动小程序、APP开发,以及开发过程中遇到的技术难点,并为您介绍一个开箱即用的解决方案。一、为什么选择uni开发APP、小程序。 在数字化时代,移动应用开发已成为…

代码随想录之滑动窗口、螺旋矩阵、区间和、开发商土地;Java之数据结构、集合源码、File类和Io流以及网络编程(11.22)

代码随想录 滑动窗口 1、如果给两个字符串s和t,判断t是否为s的子串或是否s包含t的排列,用t的长度固定滑动窗口的大小,初始化将s的前t.length()个长度的字符情况存储在int数组中,int数组的大小由字符串中字符的类型决定,最大为ascii表的长度,为128。每次循环滑动窗口向前移…

代码随想录之滑动窗口、螺旋矩阵、区间和、开发商土地;Java之数据结构、集合源码、File类和Io流以及网络编程(11.23)

代码随想录 滑动窗口 1、如果给两个字符串s和t,判断t是否为s的子串或是否s包含t的排列,用t的长度固定滑动窗口的大小,初始化将s的前t.length()个长度的字符情况存储在int数组中,int数组的大小由字符串中字符的类型决定,最大为ascii表的长度,为128。每次循环滑动窗口向前移…

一文详解:项目如何从Docker慢慢演变成了K8s部署

今天,我们将深入探讨一个项目部署的演变过程。在这篇文章中,为了紧扣主题,我们将从 Docker 开始讲解,分析为什么一个传统的项目逐步演变成了今天流行的 Kubernetes(K8s)集群部署架构。我们将通过一个简单的 Java 项目来阐述这一过程。 为了更清晰地阐述,我在本地搭建了一…

HyperWorks基于几何投影的网格变形

在Altair(HyperWorks)里,使用本节将演示如何通过 line difference 功能,将已有网格以几何图形为目标进行投影,以生成全新的网格模型。 图 7-5 网格变形模型的状态Step01:读取模型。 (1) 打开文件 Exercise_7a.hm。 Step02:对保险杠模型进行网格变形。 (1) 在 Morphing 页…

vivo 企业云盘服务端实现简介

本文将介绍企业云盘的基本功能以及服务端实现。作者:来自 vivo 互联网存储团队- Cheng Zhi本文将介绍企业云盘的基本功能以及服务端实现。 一、背景 vivo 企业云盘是一个企业级文件数据管理服务,解决办公数据的存储、共享、审计等文件管理需求;同时便于团队成员快速共享、管…

100ASK_IMX6ULL-PRO 数码相框扩展项目:支持鼠标输入

1. 鼠标输入事件 驱动已支持,测试 Hexdump /dev/input/eventX确定设备节点 项目中的输入模块 输入事件的获取 项目启动时初始化输入设备 InputDeviceInit,通过链表进行设备管理,对于每一个注册的输入设备创建一个线程阻塞式读取输入数据: static void *InputEventThreadFun…

Public Key Retrieval is not allowed解决

1、在链接的驱动属性中,增加allowPublicKeyRetrieval=true “Public Key Retrieval is not allowed” 错误是由于 MySQL 连接驱动程序的默认行为更改所引起的。在 MySQL 8.0 版本及更新版本中,默认情况下禁用了通过公钥检索用户密码的功能。 在旧版本的 MySQL 中,客户端连接…

【WPF】入门学习

一、学习资源:WPF中文网:https://www.wpfsoft.com/Visual Studio 2022:https://visualstudio.microsoft.com/zh-hans/vs/VS2022 激活密钥:https://www.cnblogs.com/soarowl/p/18200602 学习参照教程:https://www.bilibili.com/video/BV1mJ411F7zG 二、VS2022激活: 【帮助…