当前位置: 首页 > news >正文

jQuery瀑布流画廊,瀑布流动态加载

jQuery瀑布流画廊,瀑布流动态加载

效果展示

jQuery瀑布流布局PC

手机布局

jQuery瀑布流布局手机

jQuery瀑布流动态加载

HTML代码片段

<!-- mediabanner --><div class="mediabanner"><img src="img/mediabanner.jpg" class="bg"/><div class="text"><h3>千与千寻</h3><p>不管前方的路有多苦,只要走的方向正确,<br>不管多么崎岖不平,都比站在原地更接近幸福。</p></div></div><div class="mediaimg"><h3 class="tl">相册</h3><div class="medialist chroma-gallery mygallery"><!-- 动态添加内容区--></div></div>

css样式片段

还需引入 chromagallery.css

/* mediabanner */
.mediabanner{width: 100%;position: relative;height: 100%;}
.mediabanner .bg{width: 100%;position: relative;z-index: 0;height: 100%;object-fit: cover;}
.mediabanner .text{width: 1400px;position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
.mediabanner .text h3{font-size: 52px;color: #fff;font-weight: bold;font-family: cursive;margin-bottom: 30px;}
.mediabanner .text p{font-size: 32px;line-height: 42px;color: #fff;font-family: cursive;}/* mediaimg */
.mediaimg{width: 1400px;margin: auto;padding: 100px 0;}
.mediaimg .tl{font-size: 50px;color: #2e5c72;margin-bottom: 30px;line-height: 86px;font-weight: bold;text-align: center;font-family: cursive;}@media (max-width: 1600px) {.mediabanner .text,.mediaimg{width: 1200px;}
}
/*手机样式*/
@media (max-width: 750px) {.mediabanner .text,.mediaimg{width: 94%;}.mediaimg{padding: 50px 0;}.chroma-gallery{width: calc(100% + 10px);}.mediaimg .tl{font-size: 32px;line-height: 42px;margin-bottom: 20px;}.mediabanner{height: 350px;}.mediabanner .text h3{font-size: 32px;margin-bottom: 20px;}.mediabanner .text p{font-size: 18px;line-height:24px;}.mediabanner .text{box-sizing: border-box;padding-right: 100px;top: 30%;}
}

jQuery代码片段

注:要引入 jQuery.js
引用 chromagallery.pkgd.min.js

<script src="js/chromagallery.pkgd.min.js"></script>
<script>let imagesData;getImagesData();function getImagesData(){var width = $(window).width();$.ajax({url:"./json/images.json",type:'get',data:{},dataType:'json',success(msg){imagesData = msg;console.log(msg,imagesData,width);if(width<760){//手机端排列,一行显示2张,间隔10px$(".medialist").chromaGallery({color:'#000',gridMargin:10,maxColumns:2,dof:true,screenOpacity:0.8,lazyLoad:true,items:imagesData});}else{//PC排列,一行显示3张,间隔30px$(".medialist").chromaGallery({color:'#000',gridMargin:30,maxColumns:3,dof:true,screenOpacity:0.8,lazyLoad:true,items:imagesData,});}}})}</script>

json数据

images.json是写的本地数据,主要为了做展示,后期可替换

[{"src":"img/img01.jpg","alt":"CJ Li","data":"2022年02月26日","largesrc":"img/img01.jpg"},{"src":"img/img18.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img18.jpg"},{"src":"img/img02.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img02.jpg"},{"src":"img/img03.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img03.jpg"},{"src":"img/img15.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img15.jpg"},{"src":"img/img04.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img04.jpg"},{"src":"img/img06.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img06.jpg"},{"src":"img/img16.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img16.jpg"},{"src":"img/img07.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img07.jpg"},{"src":"img/img08.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img08.jpg"},{"src":"img/img09.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img09.jpg"},{"src":"img/img17.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img17.jpg"},{"src":"img/img06.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img06.jpg"},{"src":"img/img07.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img07.jpg"},{"src":"img/img08.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img08.jpg"},{"src":"img/img09.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img09.jpg"},{"src":"img/img18.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img18.jpg"},{"src":"img/img02.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img02.jpg"},{"src":"img/img03.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img03.jpg"},{"src":"img/img04.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img04.jpg"},{"src":"img/img19.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img19.jpg"},{"src":"img/img06.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img06.jpg"},{"src":"img/img07.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img07.jpg"},{"src":"img/img08.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img08.jpg"},{"src":"img/img16.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img16.jpg"},{"src":"img/img09.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img09.jpg"},{"src":"img/img06.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img06.jpg"},{"src":"img/img07.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img07.jpg"},{"src":"img/img08.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img08.jpg"},{"src":"img/img09.jpg","alt":"Pic 1","data":"2022年02月26日","largesrc":"img/img09.jpg"}
]

相关文章:

jQuery瀑布流画廊,瀑布流动态加载

jQuery瀑布流画廊&#xff0c;瀑布流动态加载 效果展示 手机布局 jQuery瀑布流动态加载 HTML代码片段 <!-- mediabanner --><div class"mediabanner"><img src"img/mediabanner.jpg" class"bg"/><div class"text&qu…...

玩转ChatGPT:参考文献速查

一、写在前面 各位大佬&#xff0c;我又回来了&#xff0c;最近2月太忙啦&#xff08;过年、奶娃、本子、材料、结题&#xff09;&#xff0c;断更了。现水一篇证明我还活着&#xff01;&#xff01;&#xff01; 最近在写国自然本子&#xff0c;遇到一个估计大家都会遇到的问…...

[设计模式Java实现附plantuml源码~行为型]算法的封装与切换——策略模式

前言&#xff1a; 为什么之前写过Golang 版的设计模式&#xff0c;还在重新写Java 版&#xff1f; 答&#xff1a;因为对于我而言&#xff0c;当然也希望对正在学习的大伙有帮助。Java作为一门纯面向对象的语言&#xff0c;更适合用于学习设计模式。 为什么类图要附上uml 因为很…...

​【C语言】长篇详解,字符系列篇3-----strstr,strtok,strerror字符串函数的使用【图文详解​】

欢迎来CILMY23的博客喔&#xff0c;本期系列为​【C语言】长篇详解&#xff0c;字符系列篇3-----strstr&#xff0c;strtok&#xff0c;strerror字符串函数的使用【图文详解​】&#xff0c;图文讲解各种字符串函数&#xff0c;带大家更深刻理解C语言中各种字符串函数的应用&am…...

如何实现一个K8S DevicePlugin?

什么是device plugin k8s允许限制容器对资源的使用&#xff0c;比如CPU和内存&#xff0c;并以此作为调度的依据。 当其他非官方支持的设备类型需要参与到k8s的工作流程中时&#xff0c;就需要实现一个device plugin。 Kubernetes提供了一个设备插件框架&#xff0c;你可以用…...

Android LruCache源码分析

文章目录 Android LruCache源码分析概述LruCache和LinkedHashMap关系源码分析属性写入数据读取数据删除缓存 Android LruCache源码分析 概述 LruCache&#xff08;Least Recently Used Cache&#xff0c;最近最少使用缓存&#xff09;是 Android 中的一种缓存机制。 根据数据…...

如何使用Inno Setup制作Unity构建程序的Windows安装程序

1. 准备 &#xff08;1&#xff09;准备好Unity构建的程序集合 必须包括&#xff1a; Data文件夹&#xff08;xxx_Data&#xff09; Mono文件夹&#xff08;MonoBleedingEdge&#xff09; 打包的应用程序文件&#xff08;xxx.exe&#xff09; Unity播放器dll文件&#xff…...

linux 面试题

1.linux操作系统的常用指令可以详细说下吗,平常哪些用的比较多 文件目录操作命令: ls cd more cat tail mkdir touch rm rmdir 拷贝复制: cp mv 打包解包压缩解压: tar -z 解亚压缩 -c 打包 -x 解包 -v 显示过程 -f 指定文件名 文本编辑: vi vim 查找: find 查找文件 gre…...

嵌入式中逻辑分析仪基本操作方法

前期准备 1.一块能触摸的屏对应的主板机 2.逻辑分析仪对应的软件工具 3.对应的拓展板 4.确定拓展板的引脚分布情况 第一步&#xff1a;逻辑分析仪j基本操作 1.数据捕捉需要先进行对应软件安装,并按照需求进行配置 2.这里以A20为例:此手机使用显示驱动芯片CST148,触摸屏分辨…...

ONLYOFFICE 桌面编辑器 v8.0 更新内容详细攻略

文章目录 引言PDF 表单RTL 支持电子表格中的新增功能Moodle 集成用密码保护 PDF 文件从“开始”菜单快速创建文档本地界面主题下载安装桌面编辑工具总结 引言 官网链接&#xff1a; ONLYOFFICE 官方网址 ONLYOFFICE 桌面编辑器是一款免费的文档处理软件&#xff0c;适用于 Li…...

2024-2-22 作业

作业要求&#xff1a; 复习前面知识点(指针、结构体、函数)整理思维导图顺序表(按位置插入、按位置删除和去重、重新写)理解链表的代码&#xff0c;尝试写一下链表的尾插和输出 1.复习前面知识点(指针、结构体、函数) 2.整理思维导图 3.顺序表(按位置插入、按位置删除和去重、…...

2.1 RK3399项目开发实录-升级固件介绍(物联技术666)

1. 介绍 1.1. 前言 AIO-3399J 出厂默认安装Android操作系统&#xff0c;如果用户要运行其他操作系统&#xff0c;需要使用对应的固件烧写到主板。 AIO-3399J 有灵活的启动方式。一般情况下&#xff0c;除非硬件损坏&#xff0c;AIO-3399J 开发板是不会变砖的。 如果在升级过…...

Uniapp + VUE3.0 实现双向滑块视频裁剪效果

效果图 <template><view v-if"info" class"all"><video:src"info.videoUrl"class"video" id"video" :controls"true" object-fit"fill" :show-fullscreen-btn"false"play-btn…...

【算法小讲堂】#1 贪心算法

引入——关于贪心算法 我们先来做一个小游戏——现在假设自己是一个小偷&#xff0c;桌上有一些物品&#xff0c;包括一台iPhone15、一个充电宝、一个眼罩和一个溜溜梅。此时&#xff0c;你听说警察即将到来&#xff0c;那么你会先带走哪个东西呢&#xff1f; 一般来讲&#xf…...

判断当前shell版本

查看$SHELL环境变量&#xff1a; echo $SHELL输出的结果将是当前使用的shell的路径。例如&#xff0c;如果输出为 /bin/bash&#xff0c;则表示当前使用的是Bash shell。 查看ps命令输出&#xff1a; ps -p $$上述命令将显示当前终端进程的信息&#xff0c;其中 $$ 代表当前进…...

如何实现两个电脑之间通过以太网(网线)实现文件互传

如何实现两个电脑之间通过以太网&#xff08;网线&#xff09;实现文件互传 本帖目的&#xff1a;介绍如何通过以太网&#xff08;网线&#xff09;连接两台电脑&#xff0c;通过文件夹共享的方式&#xff0c;实现两台电脑之间的文件互传。 本帖以笔者实际工作上遇到的场景为例…...

Jenkins 中部署Nodejs插件并使用,并构建前端项目(3)

遇到多个版本nodeJS需要构建的时候 1、第一种就是一个配置安装&#xff0c;然后进行选中配置 2、第二种就是插件&#xff1a;nvm-wrapper&#xff0c;我们还是选用NodeJS插件&#xff1a; &#xff08;1&#xff09;可以加载任意npmrc文件&#xff1b; &#xff08;2&#x…...

VUE为什么有的属性要加冒号

<el-menu-item :index "/item.menuClick" v-for"(item,i) in menu"><i class"item.menuIcon" ></i><span slot"title">{{item.menuName}}</span></el-menu-item>不加不行 加了好像是吧整体作为…...

微信小程序 --- wx.request网络请求封装

网络请求封装 网络请求模块难度较大&#xff0c;如果学习起来感觉吃力&#xff0c;可以直接学习 [请求封装-使用 npm 包发送请求] 以后的模块 01. 为什么要封装 wx.request 小程序大多数 API 都是异步 API&#xff0c;如 wx.request()&#xff0c;wx.login() 等。这类 API 接口…...

通义千问Qwen-7B-Chat Windows本地部署教程-详细认真版

通义千问本地部署教程&#x1f680; 本专栏的第四弹&#xff0c;在实现了联网调用通义千问模型进行多轮对话&#xff0c;流式输出&#xff0c;以及结合LangChain实现自建知识库之后&#xff0c;开始准备考虑实现对大模型进行本地部署&#xff0c;网上找不到看着比较舒服的教程&…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...