jQuery插件实现瀑布流

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量461 收藏 2
点赞数
分类专栏： JQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/122433096
版权

jQuery插件

1、瀑布流插件的使用

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/htmleaf-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="./dist/sortable.min.css">
  <script type="text/javascript" src="./dist/sortable.min.js"></script> 
</head>
<body>
    <div class="htmleaf-container">
		  <main class="sortable">
		    <div class="container">
		      <div class="wrapper">
		        <ul class="sortable__nav nav">
		          <li>
		            <a data-sjslink="all" class="nav__link">
		              All
		            </a>
		          </li>
		          <li>
		            <a data-sjslink="flatty" class="nav__link">
		              Flatty
		            </a>
		          </li>
		          <li>
		            <a data-sjslink="funny" class="nav__link">
		              Funny
		            </a>
		          </li>
		        </ul>
		        <div id="sortable" class="sjs-default">
		          <div data-sjsel="flatty">
		            <div class="card">
		              <img class="card__picture" src="./images/item-1.jpg" alt="">
		              <div class="card-infos">
		                <h2 class="card__title">Example 1</h2>
		                <p class="card__text">
		                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, eius, asperiores. Incidunt sapiente est quae iure...
		                </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">Example 2</h2>
		                <p class="card__text">
		                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vitae necessitatibus, dolorem similique vero explicabo...
		                </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">Example 3</h2>
		                <p class="card__text">
		                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, placeat voluptate, fuga tenetur eos ducimus animi porro...
		                </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">Example 4</h2>
		                <p class="card__text">
		                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloremque quisquam, obcaecati unde nam est quos...
		                </p>
		              </div>
		            </div>
		          </div>
		          <div data-sjsel="flatty">
		            <div class="card">
		              <img class="card__picture" src="./images/item-5.jpg" alt="">
		              <div class="card-infos">
		                <h2 class="card__title">Example 5</h2>
		                <p class="card__text">
		                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse corporis hic minima nisi reprehenderit...
		                </p>
		              </div>
		            </div>
		          </div>
		          <div data-sjsel="funny">
		            <div class="card">
		              <img class="card__picture" src="./images/item-6.jpg" alt="">
		              <div class="card-infos">
		                <h2 class="card__title">Example 6</h2>
		                <p class="card__text">
		                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus, id, deserunt inventore...
		                </p>
		              </div>
		            </div>
		          </div>
		          <div data-sjsel="flatty">
		            <div class="card">
		              <img class="card__picture" src="./images/item-7.jpg" alt="">
		              <div class="card-infos">
		                <h2 class="card__title">Example 7</h2>
		                <p class="card__text">
		                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum enim beatae vero culpa, fuga, magni sunt dolores nam...
		                </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">Example 8</h2>
		                <p class="card__text">
		                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae numquam, blanditiis necessitatibus...
		                </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">Example 9</h2>
		                <p class="card__text">
		                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur adipisci voluptatum laborum officiis...
		                </p>
		              </div>
		            </div>
		          </div>
		        </div>
		      </div>
		    </div>
		  </main>
        </div>
      
      <script type="text/javascript">
	    document.querySelector('#sortable').sortablejs()
	  </script>
</body>
</html>
小码哥呀
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 插件实现瀑布流图片展示实例
12-03
在这个实例中，我们主要讨论如何使用jQuery插件Masonry和Infinite Scroll来实现这种效果。 首先，jQuery Masonry是一款强大的插件，它可以实现瀑布流布局。在给定的代码中，`item_masonry`函数是用于初始化Masonry...
jquery实现瀑布流效果分享
10-26
jQuery Masonry插件是实现瀑布流布局的核心工具。它通过计算每个元素的宽度和位置，使得元素能够垂直堆叠，形成不规则的多列布局。在代码中，我们看到以下设置： ```javascript $container.masonry({ itemSelector...
使用jquery插件实现瀑布流效果
愤怒的小黑狗
03-16 211
   html部分：&lt;div id="container "class="clr"&gt; &lt;div class="item"&gt; &lt;img src="#" /&gt; &lt;/div&gt;&lt;/div&gt;CSS部分：.item{ float: left;margin: 0px
2024年前端最全vue 移动端无限瀑布流 插件使用，面试字节跳动的前端工程师该怎么准备
2301_82243839的博客
05-06 645
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】},var calss1_start2 = Math.round(new Date(new Date(new Date().getTime()).setHours(8,45,0,0))/1000) //获取当天8点 开始时间var calss1_end = Math.round(new Date(new Date(new Date().getTime()).setHours(9,0,0,0))/1000) //下课时间。
jQuery插件实现瀑布流，实战篇
2401_84093899的博客
04-04 633
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。[外链图片转存中…(img-hQyshGVk-1712162176872)][外链图片转存中…(img-0fXFsw4F-1712162176872)]资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
Jquery插件实现 瀑布流+预加载
断点_C的博客
08-25 357
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、Jquery插件二、使用步骤1.查看案例源码2.实现预加载3.参考结构总结 前言 在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器
jquery 瀑布流插件
qq_25261441的博客
12-13 1090
;(function($){ $.fn.waterFall = function () { var defultes = { gap:15 ,//间距 } defultes = $.extend(defultes); var $this = $(this); var item = $this.children(); // console.log(item); var
jQuery插件使用-瀑布流
w1405720461的博客
07-09 386
jQuery插件的使用-瀑布流插件使用方法
android瀑布流插件,jQuery瀑布流插件 Masonry
weixin_42510060的博客
05-27 210
插件描述：用jQuery Masonry 插件创建瀑布流式的页面我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式，下面介绍一下方法。1,分别下载 jQuery 与 Masonry ，然后把他们都加载到页面中使用。加载代码：解释：很简单，就是把下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中，注意文件的名称与路径，根据你自己的实际情况修改。2,页面代码...解释：把每个小内容...
利用jquery实现瀑布流效果
飞翔的鱼
05-04 1361
前言：现在很多内容型网站都会采用瀑布流布局来实现内容展示，包括文章类及图片类，我们可以自己动手来编写属于我们自己的瀑布流插件。效果：CSS部分： *{ margin: 0; padding: 0; } body { font-family: "Droid Serif","Helvet
ajax瀑布流插件,jQuery瀑布流无限加载插件：jquery.falless.js
weixin_29200741的博客
08-06 388
慌慌张张，匆匆忙忙，为何生活总是这样？难道说，我的理想，就是这样度过一生的时光？...........真的是一年一年飞逝而去，而人的一生，又有几个一年？第一个四年即将结束，得到了什么？又失去了什么？仔细想想，却并没有答案。而夜深人静的时候，想起四年前的自己，三年前的自己，真的和现在的自己不一样了。现在这样的我，还依旧是我吗？不知道。不过就像《活着》这首歌中所表达的那样，生活，也许真的就是这样。又有...
jQuery实现响应式瀑布流效果（jQuery+flex）
觉醒法师的专栏
05-29 2743
瀑布流原理：是一种常见的网页布局方式，它的特点是将内容以多列的形式呈现，每一列的内容高度不固定，根据内容的大小自适应调整，从而形成了像瀑布一样的流动效果。瀑布流的实现原理涉及到数据加载、布局设计、图片加载和响应式设计等方面，需要综合考虑各个方面的因素，以实现高效、流畅、美观的瀑布流效果。目前网上很多技术博文是使用定位完成瀑布流效果的，这里将使用jquery和flex布局来实现响应式瀑布流效果。
基于jQuery实现瀑布流页面
10-20
\n\n值得注意的是，此示例仅展示了基本的瀑布流实现，没有考虑到动态加载和页面滚动加载新内容的情况。在实际应用中，为了提高用户体验，通常会在用户滚动到底部时通过Ajax加载更多内容，这种技术被称为“无限滚动”...
jquery网站瀑布流插件masonry
04-02
同时，通过结合其他jQuery插件，如Isotope或Infinite Scroll，你可以实现更复杂的功能，如过滤和无限滚动加载。 总的来说，jQuery Masonry插件是创建响应式、动态瀑布流布局的利器，它极大地简化了网页开发中的布局...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 651
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 79
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 424
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1306
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
jQuery插件实战：侧边栏与瀑布流布局
本资源是一份关于计算机应用技术中jQuery插件应用的详细教程，旨在帮助学习者深入理解和掌握这一领域的核心技术。第十一章主要分为三个任务，涵盖了jQuery插件的广泛运用。 首先，任务1是关于ss-Menu固定侧边栏插件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值