【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月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
16天前
|
存储 JSON JavaScript
WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
本文介绍了如何使用MxPluginContext动态控制MxCAD项目的UI界面。通过该上下文对象,开发者可以灵活设置UI配置,如控制操作栏显隐、编辑按钮、添加侧边栏等。具体方法包括调用`getUiConfig()`获取并修改`mxUiConfig.json`中的属性,实现界面的定制化。此外,还提供了控制命令行聚焦的功能,解决输入框焦点锁定问题。详细代码示例和效果对比图展示了具体实现步骤,帮助开发者更好地适配项目需求。
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
4月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
105 5
|
4月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
100 3
|
4月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
4月前
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。
|
3天前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
39 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
11天前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。

热门文章

最新文章