first commit
This commit is contained in:
编码猿
303
衣莎项目/源码/马上洗投票/src/view/components/waterfall.vue
Normal file
303
衣莎项目/源码/马上洗投票/src/view/components/waterfall.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div class="myWaterfall" v-show="imgsArr" ref="fallbox">
|
||||
<ul>
|
||||
<!--鍒楃殑瀹藉害搴旂敱璁＄畻鐨勬潵-->
|
||||
<li v-for="(it,index) in col" :style="{width:(100/col-1)+'%'}" :ref="'col'+index" :key="it">
|
||||
<div v-for="goods in renderList[index]" :key="goods.ID">
|
||||
<slot :goods="goods" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="loading" v-show="rendering">
|
||||
<div class="wait">
|
||||
<span>L</span>
|
||||
<span>o</span>
|
||||
<span>a</span>
|
||||
<span>d</span>
|
||||
<span>i</span>
|
||||
<span>n</span>
|
||||
<span>g</span>
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<p class="nomore" v-if="over">娌℃湁鏇村浜<EFBFBD>>>></p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["col", "onReachBottom"],
|
||||
data() {
|
||||
return {
|
||||
loading: false, //鏄惁澶勪簬鍔犺浇鐘舵€侊紝鐢ㄤ簬瑙﹀簳浜嬩欢鐨勮妭娴<E5A6AD>
|
||||
nowPage: 1,
|
||||
imgsArr: [], //鏁版嵁鍒楄〃
|
||||
over: false, //鏄惁宸茬粡鍒板簳浜<E7B0B3>
|
||||
lock: false, //璇锋眰閿<E79CB0>
|
||||
rendering: false, //娓叉煋涓<E7858B>,闃叉娓叉煋鏈畬鎴愰珮搴﹁幏鍙栦笉鍑嗙‘鑰屽鑷村彲杩炵画瑙﹀彂璇锋眰
|
||||
renderList: [] //娓叉煋鍒楄〃锛屾牴鎹甶mgsArr+col鍒濆鍖栦负浜岀淮鏁扮粍
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
computedOffset(obj, prop) {
|
||||
//宸ュ叿鍑芥暟,璁＄畻鍏冪礌鍒癰ody鐨勭粷瀵逛綅缃<E7B685>
|
||||
if (obj == document.body || obj.offsetParent == document.body) {
|
||||
return parseInt(obj[prop]);
|
||||
}
|
||||
return parseInt(obj[prop]) + this.computedOffset(obj.offsetParent, prop);
|
||||
},
|
||||
getDataList() {
|
||||
//鏁版嵁鍔犺浇
|
||||
//鑺傛祦澶勭悊
|
||||
if (!this.loading && !this.over) {
|
||||
//涓嶅浜庡姞杞界姸鎬佷笖鏈夋柊鏁版嵁
|
||||
let self = this;
|
||||
this.loading = true;
|
||||
//椤垫暟澧炲姞
|
||||
this.onReachBottom(self.nowPage).then(res => {
|
||||
//鎷兼帴
|
||||
self.rendering = true; //娓叉煋鐘舵€佷腑
|
||||
if (res.data.list.length > 0) {
|
||||
self.nowPage++;
|
||||
let len = self.imgsArr.length;
|
||||
self.imgsArr = self.imgsArr.concat(res.data.list);
|
||||
self.fullData(len); //浠呭鏂扮殑鏁版嵁鍋氭覆鏌擄紝闇€瑕佷粠鍘熸暟缁勭殑缁堢偣寮€濮<E282AC>
|
||||
self.lock = false;
|
||||
} else {
|
||||
//娌℃湁鏂版暟鎹<E69A9F>
|
||||
self.over = true;
|
||||
self.rendering = false;
|
||||
}
|
||||
self.loading = false;
|
||||
});
|
||||
} else {
|
||||
//澶勪簬璇锋眰鐘舵€侊紝鑺傛祦,鎴栧凡鍑虹幇鏃犳暟鎹紙over锛夛紝蹇界暐璇锋眰
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
//姣旇緝鍒楃殑楂樺害鏉ュ垽鏂悜鍝竴涓垪涓坊鍔犳暟鎹<E69A9F>
|
||||
fullData(index) {
|
||||
if (index < this.imgsArr.length) {
|
||||
let self = this;
|
||||
|
||||
let newImg = new Image();
|
||||
/****************姝ゅ闇€浠ヤ釜浜虹殑鏁版嵁鏍煎紡璋冩暣*******************/
|
||||
newImg.src = self.imgsArr[index].img;
|
||||
newImg.onload = () => {
|
||||
//闇€绛夊緟鍥剧墖鍔犺浇锛屽惁鍒欓珮搴︿笉鍑嗙‘
|
||||
let colHeightList = []; //鎵€鏈夊垪鐨勯珮搴﹁〃
|
||||
for (let i = 0; i < self.col; i++) {
|
||||
colHeightList[i] = self.$refs["col" + i][0].offsetHeight;
|
||||
}
|
||||
|
||||
//鑾峰彇鏈€灏忓垪
|
||||
var min = colHeightList.indexOf(Math.min.apply(Math, colHeightList));
|
||||
// self.renderList[min].push(self.imgsArr[index]);
|
||||
let tar = self.renderList[min].concat(self.imgsArr[index]);
|
||||
//闇€瑕佹洿鏂拌鍥撅紝涓婇潰鐨勪娇鐢╬ush涓嶄細鏇存柊瑙嗗浘锛堟搷浣滅殑绗簩缁达級,浣跨敤set
|
||||
self.$set(self.renderList, min, tar);
|
||||
self.fullData(index + 1);
|
||||
};
|
||||
} else {
|
||||
this.rendering = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//娓叉煋鍒<E7858B> 鍒楄〃,鏍规嵁濡傜殑col鐢熸垚瀵瑰簲鍒楁暟,骞剁疆涓虹┖鐨勪簩缁存暟缁<E69A9F>
|
||||
for (var i = 0; i < this.col; i++) {
|
||||
this.renderList[i] = [];
|
||||
}
|
||||
//璇锋眰棣栨鏁版嵁:
|
||||
this.getDataList();
|
||||
let self = this;
|
||||
window.onscroll = function(e) {
|
||||
//鐩戞祴瑙﹀簳
|
||||
//鐎戝竷娴侀珮搴<E78FAE> + 鐎戝竷娴佺殑鐩稿top < 鍙鍖洪珮搴<E78FAE>+婊氬姩璺濈 ==瑙﹀簳
|
||||
//鑾峰彇鍒扮€戝竷娴佺洅瀛<E6B485>
|
||||
let box = self.$refs.fallbox;
|
||||
//鑾峰彇鍒扮洅瀛愮浉瀵逛簬鏂囨。鐨勪綅缃<E7B685>
|
||||
let top = self.computedOffset(box, "offsetTop");
|
||||
let height = box.offsetHeight;
|
||||
//鍙鍖洪珮搴<E78FAE>
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
//婊氬姩璺濈
|
||||
let scrollTop = document.documentElement.scrollTop;
|
||||
if (
|
||||
top + height < clientHeight + scrollTop + 50 &&
|
||||
!self.lock &&
|
||||
!self.rendering
|
||||
) {
|
||||
//瑙﹀簳鍒ゆ柇,50鐢ㄤ簬鎻愬墠瑙﹀彂,涓嶇敤瀹屽叏鍒板簳鎵嶈Е鍙<D095>
|
||||
//瑙﹀簳鎴愬姛
|
||||
self.lock = true;
|
||||
self.getDataList();
|
||||
}
|
||||
};
|
||||
this.fullData(0);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
//鍙栨秷婊氬姩浜嬩欢锛岄噸瑕侊紝鍚﹀垯璺敱璺宠浆鍚庢墽琛宻croll浜嬩欢灏嗕細鏈変竴鍫嗙殑undefined
|
||||
window.onscroll = null;
|
||||
//婊氬姩鏉＄疆椤讹紝鍚﹀垯璺敱璺宠浆鍚庢粴鍔ㄦ潯鐨勪綅缃病鏈夊彉鍖<E5BD89>
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" >
|
||||
@keyframes jump {
|
||||
0% {
|
||||
top: -10px;
|
||||
}
|
||||
100% {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
.loading {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
top: 0;
|
||||
left: 0;
|
||||
.wait {
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 10px;
|
||||
line-height: 50px;
|
||||
font-weight: 900;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
letter-spacing: 2px;
|
||||
span {
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
}
|
||||
span:first-of-type {
|
||||
color: red;
|
||||
animation: jump 0.8s linear alternate-reverse infinite;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
color: orange;
|
||||
animation: jump 0.8s linear 0.3s alternate-reverse infinite;
|
||||
}
|
||||
span:nth-of-type(3) {
|
||||
color: yellow;
|
||||
animation: jump 0.8s linear 0.6s alternate-reverse infinite;
|
||||
}
|
||||
span:nth-of-type(4) {
|
||||
color: green;
|
||||
animation: jump 0.8s linear 0.9s alternate-reverse infinite;
|
||||
}
|
||||
span:nth-of-type(5) {
|
||||
color: cyan;
|
||||
animation: jump 0.8s linear 1.2s alternate-reverse infinite;
|
||||
}
|
||||
span:nth-of-type(6) {
|
||||
color: blue;
|
||||
animation: jump 0.8s linear 1.5s alternate-reverse infinite;
|
||||
}
|
||||
span:nth-of-type(7) {
|
||||
color: purple;
|
||||
animation: jump 0.8s linear 1.8s alternate-reverse infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.myWaterfall {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.nomore {
|
||||
color: grey;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
ul {
|
||||
/*display: flex;*/
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
background: whitesmoke;
|
||||
border-radius: 10px;
|
||||
li {
|
||||
/*overflow: hidden;*/
|
||||
/*flex: 1;*/
|
||||
float: left;
|
||||
/*width:25%;*/
|
||||
margin: 0 5px;
|
||||
color: #444;
|
||||
overflow: hidden;
|
||||
.goodsA:hover {
|
||||
color: darkorange;
|
||||
background-color: rgba(223, 234, 200, 0.1);
|
||||
}
|
||||
.goodsA {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 3px 1px 3px 0 grey;
|
||||
background: red;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.goodsInfo {
|
||||
width: 100%;
|
||||
.goodsName {
|
||||
font-weight: 900;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-indent: 10px;
|
||||
}
|
||||
.description {
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
text-indent: 10px;
|
||||
/*height:25px;*/
|
||||
line-height: 25px;
|
||||
}
|
||||
.price {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 10px;
|
||||
text-align: left;
|
||||
text-indent: 10px;
|
||||
position: relative;
|
||||
.nowPrice {
|
||||
color: rgb(253, 132, 18);
|
||||
font-weight: 900;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
em {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.originPrice {
|
||||
font-size: 14px;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
.sale {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user