🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
在朋友圈中，除了普遍的一行三列的佈局外，一張、二張、四張圖片時的佈局是不一樣的。一張圖片時，按圖片原有寬高顯示。
兩張圖片，並行展示，圖片會偏大一些。
四張圖片時，一行顯示兩個。
三張、及四張以上時，按一行三列排序。
實現
這裏結合naive ui組件實現圖片展示。頁面獲取到 圖片數據（Array[Object]）後通過 n-image-group 以組的形式展示圖片。
<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>
