相册由原来Lightbox升级至Vue2瀑布流

艾倩烧烤 發表於 2025-11-24 16:05:00

相册由原来Lightbox升级至Vue2瀑布流

一直以来，图片展示，均使用lightbox来实现，如：
https://www.cnblogs.com/insus/archive/2013/05/18/3085114.html
https://www.cnblogs.com/insus/p/18638016 随着时间进步，用户体验，在电脑上浏览时仍觉得可以，但在手机上浏览时，却是另外一种体验。 好吧，上星周未，把程序改一改，改为瀑布流式..... 项目是在原有的基础上修改新增功能，许多功能已经不必再重新开发与编写。 瀑布流图片展示，可以定义每次加载几张图片，这个需要对图片数据进行分页。 
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_0e4300ad-de5c-42bd-b0bc-c39d6dadb47e" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_0e4300ad-de5c-42bd-b0bc-c39d6dadb47e" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_0e4300ad-de5c-42bd-b0bc-c39d6dadb47e" class="cnblogs_code_hide">
<pre>SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author: <Author,,Insus.NET>
-- Create date: <Create Date,,2025-11-22>
-- Description: <Description,,获取媒体数据，并进行数据分页>
-- =============================================
CREATE PROCEDURE [dbo].[usp_Media_GetByCatalogKey]
(
@Catalog_nbr INT,
@PageIndex INT,
@PageSize INT
)
as
BEGIN
DECLARE @result TABLE
(
 [ID] INT,
 [FileName] NVARCHAR(255),
 SystemName NVARCHAR(255),
 [Width] INT,
 [Height] INT,
 [OriginalWidth] INT,
 [OriginalHeight] INT,
 [OriginalImage_Path] NVARCHAR(255),
 [Thumbnail_Path] NVARCHAR(255)
)
INSERT INTO @result
(
 [ID],
 --...
 [Thumbnail_Path]
)
SELECT TOP (SELECT @PageSize)
 [Media_nbr],
 [FileName],
 [SystemName],
 [Width],--缩略图宽度
 [Height],--缩略图高度
 [OriginalWidth],--图宽度
 [OriginalHeight],--原图高度
 '/'+ [Media_Directory] +'/'+ [Storage_Directory]+'/O/'+ [FileName],--组合原图路径
 '/'+ [Media_Directory] +'/'+ [Storage_Directory]+'/T/'+ [SystemName] --组合缩略图路径 
FROM (
 SELECT row_number() OVER(ORDER BY [Media_nbr]) AS rownumber,
 [Media_nbr],
 --...
 [OriginalHeight]
 FROM [dbo].[Media]
 WHERE [Catalog_nbr] = @Catalog_nbr
 ) temp_row
WHERE rownumber > (@PageIndex - 1) * @PageSize;

SELECT
 [ID],
 --...
 [Thumbnail_Path]
FROM @result
END</pre>
</div>
View Code</div>
 
引用vue类库，
<div class="cnblogs_code">
<pre><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script></pre>
</div>
引用axios,
<div class="cnblogs_code">
<pre><script src="~/Scripts/axios.js"></script></pre>
</div>
 样式，
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_969b06d3-3068-49e1-8f62-cf969dddafae" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_969b06d3-3068-49e1-8f62-cf969dddafae" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_969b06d3-3068-49e1-8f62-cf969dddafae" class="cnblogs_code_hide">
<pre> * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f7fa;
color: #333;
padding: 20px;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

.loading {
text-align: center;
padding: 20px;
font-size: 18px;
color: #3498db;
}

.masonry-grid {
display: flex;
margin-left: -15px;
width: auto;
}

.masonry-column {
padding-left: 15px;
background-clip: padding-box;
}

.masonry-item {
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: white;
}

.masonry-item:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.masonry-item img {
 width: 100%;
 display: block;
 transition: opacity 0.3s ease;
}

.image-info {
padding: 12px;
font-size: 14px;
}

.image-info p {
 margin-bottom: 5px;
}

.dimensions {
color: #7f8c8d;
}

.load-more {
text-align: center;
margin-top: 30px;
}

.load-more button {
 background-color: #3498db;
 color: white;
 border: none;
 padding: 12px 24px;
 border-radius: 4px;
 cursor: pointer;
 font-size: 16px;
 transition: background-color 0.3s;
}

 .load-more button:hover {
 background-color: #2980b9;
 }

.error-message {
text-align: center;
color: #e74c3c;
padding: 20px;
background-color: #fadbd8;
border-radius: 4px;
margin: 20px 0;
}

@@media (max-width: 768px) {
.masonry-grid {
 margin-left: -10px;
}

.masonry-column {
 padding-left: 10px;
}
}</pre>
</div>
View Code</div>
 
html, <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251124133557316-2044784528.jpg" alt="2025-11-24_13-29-26" loading="lazy">
 
js, <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251124134617011-1369332794.jpg" alt="2025-11-24_13-38-36" loading="lazy">
 下面是methods,代码详细， <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251124135944266-1736932925.jpg" alt="2025-11-24_13-54-14" loading="lazy">
 
方法3，请求数据， <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251124145156883-847121802.jpg" alt="2025-11-24_14-01-22" loading="lazy">
 方法4，
<img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251124150030940-827224201.jpg" alt="2025-11-24_14-54-26" loading="lazy">
 
asp.net mvc 5 + vue2 + axios，效果， <img src="https://img2024.cnblogs.com/blog/28036/202511/28036-20251124155727492-2015918624.gif" alt="4" loading="lazy">
 
 
来源：https://www.cnblogs.com/insus/p/19264292

頁: [1]

琼殿技术论坛's Archiver

相册由原来Lightbox升级至Vue2瀑布流