【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. 本插件代码量较少,建议学习其源码,对编程之路必定大有好处。
目录
打赏
0
0
0
0
5
分享
相关文章
WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
本文介绍了如何使用MxPluginContext动态控制MxCAD项目的UI界面。通过该上下文对象,开发者可以灵活设置UI配置,如控制操作栏显隐、编辑按钮、添加侧边栏等。具体方法包括调用`getUiConfig()`获取并修改`mxUiConfig.json`中的属性,实现界面的定制化。此外,还提供了控制命令行聚焦的功能,解决输入框焦点锁定问题。详细代码示例和效果对比图展示了具体实现步骤,帮助开发者更好地适配项目需求。
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
71 6
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
95 5
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
95 3
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。
|
5月前
|
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
290 3
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
172 62
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    17
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    9
  • 3
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
    142
  • 4
    详解智能编码在前端研发的创新应用
    10
  • 5
    巧用通义灵码,提升前端研发效率
    20
  • 6
    智能编码在前端研发的创新应用
    13
  • 7
    VSCode AI提效工具,通义灵码前端开发体验
    22
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    17
  • 9
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
    82
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    8
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等