142 lines
3.1 KiB
Vue
142 lines
3.1 KiB
Vue
<template>
|
|
<div class="box flex" ref="curcomp">
|
|
<div class="col" v-for="item in fileArr">
|
|
<div v-for="i in item">
|
|
<slot :file="i"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, watch } from "vue";
|
|
const prop = defineProps({
|
|
fileList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
count: [String, Number],
|
|
pathname: String,
|
|
bot: {
|
|
type: [String, Number],
|
|
default: 20
|
|
},
|
|
imgW: {
|
|
type: [String, Number],
|
|
default: 200
|
|
},
|
|
});
|
|
const { fileList, count, pathname, bot, imgW } = toRefs(prop);
|
|
const list = reactive({})
|
|
const lh = ref([])
|
|
const fileArr = ref([])
|
|
const originList = ref([])
|
|
|
|
initList(count.value)
|
|
|
|
watch(() => count.value, init)
|
|
|
|
watch(() => fileList.value, initPart, { immediate: true })
|
|
|
|
|
|
function initPart() {
|
|
console.log("initPart", fileList.value);
|
|
if (fileList.value.length < 1) {
|
|
// console.log("query");
|
|
const c = count.value
|
|
initList(c)
|
|
}
|
|
fileArr.value = []
|
|
originList.value = originList.value.concat(fileList.value)
|
|
const c = count.value
|
|
getlist(fileList.value)
|
|
for (let i = 0; i < c; i++) {
|
|
fileArr.value.push(list["file" + i])
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
fileArr.value = []
|
|
// console.log("init",fileList.value);
|
|
const c = count.value
|
|
// console.log("列数--->", c);
|
|
initList(c)
|
|
getlist(originList.value)
|
|
// console.log("list分组情况", list);
|
|
for (let i = 0; i < c; i++) {
|
|
fileArr.value.push(list["file" + i])
|
|
}
|
|
}
|
|
|
|
function initList(c) {
|
|
lh.value = []
|
|
for (let i = 0; i < c; i++) {
|
|
list["file" + i] = []
|
|
lh.value.push(0)
|
|
}
|
|
}
|
|
|
|
function getlist(fl) {
|
|
if (lh.value.length != count.value) return
|
|
fl.forEach(async i => {
|
|
const { height, width } = await getImageSizeByCheck(i[pathname.value])
|
|
const index = getlhmIndex()
|
|
const h = imgW.value * height / width
|
|
list["file" + index].push(i)
|
|
// console.log("^^^",index,h,list["file" + index]);
|
|
lh.value[index] += (h + Number(bot.value))
|
|
})
|
|
|
|
}
|
|
|
|
function getImageSize(url) {
|
|
return new Promise(function (resolve, reject) {
|
|
let image = new Image();
|
|
image.onload = function () {
|
|
resolve(image.height);
|
|
};
|
|
image.onerror = function () {
|
|
reject(new Error('error'));
|
|
};
|
|
image.src = url;
|
|
});
|
|
}
|
|
|
|
function getImageSizeByCheck(url) {
|
|
return new Promise(function (resolve, reject) {
|
|
let image = new Image();
|
|
image.src = url;
|
|
let height = 0
|
|
let width = 0
|
|
let timer = setInterval(() => {
|
|
if (image.width > 0 && image.height > 0) {
|
|
height = image.height
|
|
width = image.width
|
|
resolve({ height, width })
|
|
clearInterval(timer)
|
|
}
|
|
}, 40)
|
|
|
|
|
|
});
|
|
}
|
|
|
|
function getlhmIndex() {
|
|
const min = Math.min(...lh.value)
|
|
// console.log(">>>>>>",lh.value,min,lh.value.findIndex(i => i == min));
|
|
return lh.value.findIndex(i => i == min)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.col:not(:last-child) {
|
|
margin-right: 20px;
|
|
}
|
|
@media screen and (max-width:1000px) {
|
|
.col:not(:last-child) {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
</style>
|