js前端开发-响应式画廊Gallery插件-Justified-Gallery

本文最后更新于：2 个月前

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

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

插件主要特性

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

    如何使用

    Justified Gallery接受固定格式的画廊：每一个a链接中包含一个缩略图，而链接指向原始图片：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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支持，之后还需引入插件的文件：
    1
    2
    3
    <link rel="stylesheet" href="css/justifiedGallery.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.justifiedGallery.js"></script>
    现在你只需调用即可，它会使用默认参数调整你的图像：
    1
    $("#mygallery").justifiedGallery();
    项目 Github 地址： https://github.com/miromannino/Justified-Gallery
    更多使用请参考其 使用文档 。
    源码国内源：https://gitee.com/Guang_Long_Yu/justified-gallery