303 lines
8.9 KiB
Vue
303 lines
8.9 KiB
Vue
<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> |