【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. 本插件代码量较少,建议学习其源码,对编程之路必定大有好处。
目录
相关文章
|
1月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
24天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
29天前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
29天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
42 5
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
164 3
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
173 45
|
17天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
下一篇
DataWorks