vue瀑布流demo_分享一款带排序功能的瀑布流插件sortableJs

最新推荐文章于 2024-08-08 10:30:00 发布

weixin_39878698

最新推荐文章于 2024-08-08 10:30:00 发布

阅读量595

点赞数 1

文章标签： vue瀑布流demo 前端改变div排序

本文链接：https://blog.csdn.net/weixin_39878698/article/details/111289346

版权

本文介绍了一款名为SortableJS的前端插件，用于在Vue项目中创建瀑布流布局，并且具备动态排序功能。详细阐述了插件的使用方法以及所需的HTML结构，帮助开发者实现交互式的瀑布流展示效果。

摘要由CSDN通过智能技术生成

今天跟大家分享一款瀑布流插件【sortableJs】。它是一款带排序功能的js masonry瀑布流插件。它能够使元素以卡片形式显示，并以masonry瀑布流方式进行布局，通过点击分类按钮，可以将卡片按指定的方式动态排序。该插件的github地址为：https://github.com/TristanBlg/sortableJs Demo下载地址： https://tc5.us/file/21793581-403218888 Demo截图：

一、插件使用方法

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

<link rel="stylesheet" href="./demo/sortable.min.css"><script src="./demo/sortable.min.js">script>

二、HTML结构

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

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

1、使用无序列表插件一组元素，每个链接都添加一个 data-sjslink 属性，指向要操作的分类元素。 2、将同一种类的元素包裹在 data-sjsel 属性的块级元素中。 3、将所有的块级元包裹子啊 sjs-default 容器中，并指定一个id。 三、初始化插件 最后，在页面DOM元素加载完毕之后，通过 sortablejs() 方法来初始化插件。

<script type="text/javascript">  document.querySelector('#sortable').sortablejs()script>

四、完整的HTML页面代码

<html lang="zh"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>一款带排序功能的瀑布流插件|DEMO_web前端开发_专注web前端领域的学习与优质资源的分享title>  <link rel="stylesheet" type="text/css" href="css/web-demo.css">  <link rel="stylesheet" href="./css/main.css">  <link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet">  <link rel="stylesheet" href="./demo/sortable.min.css">  <script type="text/javascript" src="./demo/sortable.min.js">script>head><body>  <div class="web-container">    <header class="web-header">      <h1>一款带排序功能的瀑布流插件 <span>web前端开发-www.webqdkf.comspan>h1>      <div class="web-links">        <a class="web-icon icon-web-home-outline" href="http://www.webqdkf.com/" title="web前端开发" target="_blank"><span> web前端开发span>a>        <a class="web-icon icon-web-arrow-forward-outline" href="http://www.webqdkf.com/qdkf/js/2019-10-19/485.html" title="返回下载页" target="_blank"><span> 返回下载页span>a>      div>    header>      <main class="sortable">        <div class="container">          <div class="wrapper">            <ul class="sortable__nav nav">              <li>                <a data-sjslink="all" class="nav__link">                  全部                a>              li>              <li>                <a data-sjslink="flatty" class="nav__link">                 双数                a>              li>              <li>                <a data-sjslink="funny" class="nav__link">                  单数                a>              li>            ul>            <div id="sortable" class="sjs-default">              <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-1.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 01h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-2.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 02h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-3.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 03h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-4.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 04h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-5.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 05h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-6.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 06h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-7.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 07h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-8.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 08h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>                     <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-9.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 09h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>                     <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-10.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 10h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>                    <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-11.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 11h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>                    <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-12.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 12h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>                    <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-13.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 13h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>                    <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-14.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 14h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>                    <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-15.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 15h2>                    <p class="card__text">                     【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-16.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 16h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>               <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-17.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 17h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>               <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-18.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 18h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>               <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-19.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 19h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>               <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-20.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 20h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>               <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-21.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 21h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>               <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-22.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 22h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>               <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-23.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 23h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>               <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-24.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 24h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-25.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 25h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>              <div data-sjsel="flatty">                <div class="card">                  <img class="card__picture" src="./images/item-26.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 26h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>               <div data-sjsel="funny">                <div class="card">                  <img class="card__picture" src="./images/item-27.jpg" alt="">                  <div class="card-infos">                    <h2 class="card__title">设计8号工作室出品 27h2>                    <p class="card__text">                      【设计8号】为您提供一站式企宣服务，企业画册，个人照片书设计，名片设计，VI设计，平面设计，UI设计，网站制作，小程序开发，公号开发......                    p>                  div>                div>              div>            div>          div>        div>      main>          <script type="text/javascript">      document.querySelector('#sortable').sortablejs()script>body>html>

‍