【web前端技术】响应式画廊Gallery插件-Justified-Gallery

简介: 【web前端技术】响应式画廊Gallery插件-Justified-Gallery

Justified-Gallery是一个常见的图片布局插件,他拥有安装简单,方便使用的优点,且图片布局较为好看,是一款极为好用的图片布局插件。可惜是网上资料较少,因此我下载了一份官方的代码,上传到了码云,并且整理了一些基本的使用教程。



本jQuery插件允许你在一个合理的空间内创建响应式、无限滚动、高品质的画廊,并填充满所有的空间。

对于制作网站的人来说,一个常见的问题就是使用各种尺寸和宽高比的图像来创建一个优雅的画廊,Flickr 和 Google+对于这方面的处理非常的棒,这个插件的目的就是使用一种新的快速的算法来帮你解决这个问题。

插件主要特性

  • 无需在意像素:使用一种先进的算法无需剪裁图像进行自动调整
  • 无限滚动:已经为图片无限加载做好准备,只需添加图片并告诉Justified Gallery
  • 高质量:支持任何设备和屏幕尺寸
  • 动态画廊:过滤、排序、随机、添加、删除图像,你可以对画廊进行任何操作
  • 灯箱效果一体化:你可以使用现有的灯箱效果,如Colorbox 或 Swipebox
  • 高度可定制化:提供很多选择供你打造你想要的画廊效果
  • Captions:可以给你的图片添加说明文字
  • 响应式:可根据屏幕尺寸自动调整大小
  • 快速设计:带有智能的缩略图加载,生而很快
  • 错误处理:管理服务器的错误,自动跳过不可用图像,并在控制台给出提示

如何使用

Justified Gallery接受固定格式的画廊:每一个a链接中包含一个缩略图,而链接指向原始图片:

<div id="mygallery" >
    <a href="path/to/myimage1_original.jpg">
        <img alt="Title 1" src="path/to/myimage1_thumbnail.jpg"/>
    </a>
    <a href="path/to/myimage2_original.jpg">
        <img alt="Title 2" src="path/to/myimage2_thumbnail.jpg"/>
    </a>
    <!-- other images... -->
</div>

插件需要jQuery支持,之后还需引入插件的文件:

<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.justifiedGallery.js"></script>

现在你只需调用即可,它会使用默认参数调整你的图像:

$("#mygallery").justifiedGallery();

Github 项目 地址: https://github.com/miromannino/Justified-Gallery

更多使用请参考其 使用文档

源码国内源:https://gitee.com/Guang_Long_Yu/justified-gallery

一些使用的建议

  1. 在一些用到 jQuery 的应用中,建议直接使用本插件来进行图片布局。
  2. 学习本插件,建议下载我上传到码云的代码,里面带有20多个常用的图片布局例子,更加方便入门,也更加容易快速上手。
  3. 本插件代码量较少,建议学习其源码,对编程之路必定大有好处。
目录
相关文章
|
6月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
545 108
|
5月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
537 1
|
6月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
641 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
10月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
587 70
|
8月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
109 2
|
8月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
245 1
|
8月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
254 1
|
9月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
344 7
|
12月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
346 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
4月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
379 4