当前位置:主页 > JavsScript库 > 图库 / 图片 >

JavaScript中的响应式合理照片库 – Cube Gallery
栏目分类:图库 / 图片   发布日期:2021-09-28   浏览次数:

Cube Gallery 是一个 JavaScript 库,可从一组不同大小的图像呈现响应式合理的照片库。

受 Flickr Gallery 和 Google Image Search 的启发。

使用:

1. 在图库容器中添加一组图像。

<div id="gallery" class="gallery">
  <img src="1.jpg" alt="Image Alt" />
  <img src="2.jpg" alt="Image Alt" />
  <img src="3.jpg" alt="Image Alt" />
  <img src="4.jpg" alt="Image Alt" />
  <img src="5.jpg" alt="Image Alt" />
  ...
</div>

2. 在文档末尾加载 Cube Gallery 的 JavaScript。

<script src="dist/cube-gallery.min.js"></script>

3.在顶部容器上初始化Cube Gallery并完成。

new CubeGallery('gallery')

4. 指定图库中图像的最小高度。默认值:100。

new CubeGallery('gallery',{
    minHeight: 150
})

5. 指定图像之间的空间。默认值:0。

new CubeGallery('gallery',{
    margin: 5
})

官方网站:https://github.com/TyomaMtl/cube-gallery

相关热词: 照片库

下一篇:没有了
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库