微信朋友圈图片布局
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<blockquote>
<p>在朋友圈中，除了普遍的一行三列的布局外，一张、二张、四张图片时的布局是不一样的。一张图片时，按图片原有宽高显示。</p>
</blockquote>
<p> </p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202601/2149129-20260125194449581-1301856625.png" alt="ScreenShot_2026-01-25_192024_957" loading="lazy"></p>
<p> 两张图片，并行展示，图片会偏大一些。</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202601/2149129-20260125194500058-1877961753.png" alt="ScreenShot_2026-01-25_192031_169" loading="lazy"></p>
<p> 四张图片时，一行显示两个。</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202601/2149129-20260125194513730-1337416121.png" alt="ScreenShot_2026-01-25_192037_349" loading="lazy"></p>
<p> 三张、及四张以上时，按一行三列排序。</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202601/2149129-20260125194523642-364908309.png" alt="ScreenShot_2026-01-25_192043_043" loading="lazy"></p>
<h2 data-id="heading-0">实现</h2>
<p>这里结合naive ui组件实现图片展示。页面获取到 图片数据（Array）后通过 <code>n-image-group</code> 以组的形式展示图片。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><n-scrollbar style="max-height: 60vh">
<n-image-group>
<div class="moment-images" :class="calssName">
<div class="image-item" v-for="(item, index) in fileList" :key="index">
<n-image :src="item.url" :img-props="{ style: { 'aspect-ratio': '1/1' } }" />
</div>
</div>
</n-image-group>
</n-scrollbar>
<script setup>
import { ref, nextTick } from "vue";
const calssName = ref('')//类名
const fileList= ref([])//图片数据
//根据图片总长度来设置图片类名
function setClassName() {
let length = fileList.value.length
switch (length) {
case 1:
calssName.value = 'image-count-1'
break;
case 2:
calssName.value = 'image-count-2'
break;
case 3:
calssName.value = 'image-count-3'
break;
case 4:
calssName.value = 'image-count-4'
break;
default:
calssName.value = 'image-count-3'
break;
}
}
setClassName()
</script>
<style>
/* 单图布局 */
.img-count-1 {
grid-template-columns: 1fr;
max-width: 300px;
max-height: 300px;
}
/* 双图布局 */
.image-count-2 {
grid-template-columns: repeat(2, 1fr);
width: 300px;
}
/* 三图-四图以上布局 */
.image-count-3 {
grid-template-columns: repeat(3, 1fr);
width: 350px;
}
/* 四图布局 */
.image-count-4 {
grid-template-columns: repeat(2, 1fr);
width: 400px;
}
.moment-images {
display: grid;
gap: 4px;
margin-top: 8px;
border-radius: 4px;
overflow: hidden;
}
.image-item {
aspect-ratio: 1/1;
overflow: hidden;
position: relative;
background-color: #f5f5f5;
}
</style></pre>
</div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19530363
頁:
[1]