lightgallery+justifiedGallery实现图片相册自适应瀑布流点击放大效果代码-html代码-BFW代码库

lightgallery+justifiedGallery实现图片相册自适应瀑布流点击放大效果代码

代码语言：html

代码描述：lightgallery+justifiedGallery实现图片相册自适应瀑布流点击放大效果代码，使用bootstrap布局，点击后放大图片幻灯片，包含缩略图。

代码标签： lightgallery justifiedGallery 图片相册自适应瀑布流点击放大

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lightgallery.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lg-zoom.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/justifiedGallery.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.0.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lg-thumbnail.css">
  
<style>
body {
  padding: 40px;
  background-image: linear-gradient(#e8f0ff 0%, white 52.08%);
  color: #0e3481;
  min-height: 100vh;
}

.header .lead {
  max-width: 620px;
}
.gallery-container-wrap {
  position: relative;
}

/** Below CSS is completely optional **/

.gallery-item {
  width: 200px;
  padding: 5px;
}

.btn-dynamic {
  color: #333;
  background-color: white;
  padding: 5px 10px;
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 14px;
  z-index: 9999;
}
</style>

  
  
  
</head>

<body >
  <div class="header d-flex flex-column align-items-center">
  <h1 class="display-6 mt-3 mb-0">lightGallery</h1>
  <.........完整代码请登录后点击上方下载按钮下载查看