@pixui-dev/pxw 0.1.20 → 0.1.21

package/lib/pi_component/tinyList/tinyList.js

@@ -1,483 +1,483 @@
-export const Direction = {
-	Horizontal: 0,
-	Vertical: 1,
-};
-
-Object.freeze(Direction);
-
-let startIndex = 0;
-let endIndex = -1;
-let startBoundary = 0;
-let endBoundary = 0;
-let containerWidth = 0;
-let viewHeight = 0;
-let viewWidth = 0;
-let containerHeight = 0;
-let scorllDirection = Direction.Vertical;
-
-let itemSize = 0;
-let defaultItemSize = 200;
-
-let viewDiv;
-let contentDiv;
-
-let itemCount = 0;
-let itemPool = [];
-let itemMap = {};
-let itemSizeList = [];
-let MOVE_DELTA = 0; //要设置的比较小才有效
-let curScrollOffset = 0;
-let fillItemFunc;
-let onStartFunc;
-let onEndFunc;
-let CalculateItemSizeFunc;
-
-let cacheNumber = 0; //多缓存几个数量
-
-//root：该瀑布流组件根节点
-//count：当前列表的数量
-//viewSize:瀑布流组件viewSize，高或宽超出部分不显示
-//direction:方向，暂时仅支持垂直
-//calculatedSize:单元格固定尺寸，可设置为一个计算单元格高度的函数。
-//cacheNum:滑动过快的话，可稍微增加几个缓存，设置缓存数量。
-//fillFunc:填充具体对应的Item函数委托
-export const CreateList = (root, count, viewSize, direction, calculatedSize, cacheNum, fillFunc) => {
-	if (root != undefined) {
-		itemCount = count;
-		scorllDirection = direction;
-		cacheNumber = cacheNum;
-		if (typeof calculatedSize == 'function') {
-			// console.log('---------------    itemSize is Funtion -------------------')
-			CalculateItemSizeFunc = calculatedSize;
-		}
-		else {
-			// console.log('---------------    itemSize is size Num -------------------')
-			itemSize = calculatedSize;
-		}
-		viewDiv = document.createElement('div');
-		viewDiv.style.position = 'relative';
-		viewDiv.style.overflow = 'scroll';
-		viewDiv.style.willChange = 'transform';
-		viewDiv.style.left = '0px';
-		viewDiv.style.top = '0px';
-
-		viewDiv.addEventListener('scroll', OnScroll);
-		root.appendChild(viewDiv);
-		//创建一个contener
-		contentDiv = document.createElement('div');
-
-		if (scorllDirection == Direction.Horizontal) {
-			viewWidth = viewSize;
-			viewDiv.style.flexDirection = 'row';
-			// viewDiv.style.height = `100%`;
-			viewDiv.style.height = '400px';
-			viewDiv.style.width = `${viewSize}px`;
-			viewWidth = viewSize;
-			contentDiv.style.height = '100%';
-		}
-		else {
-			viewDiv.style.flexDirection = 'column';
-			viewDiv.style.height = `${viewSize}px`;
-			viewDiv.style.width = '100%';
-			viewHeight = viewSize;
-			contentDiv.style.width = '100%';
-		}
-		viewDiv.appendChild(contentDiv);
-		InitItemsSize(0, itemCount);
-		fillItemFunc = fillFunc;
-		itemMap = {};
-		Fill();
-	}
-	else console.log('----------  未能找到瀑布流组件根节点！！！！  ------------');
-	return viewDiv;
-};
-
-const InitItemsSize = (begin, end) => {
-	for (let i = begin; i < end; i++) {
-		itemSizeList[i] = -1;
-	}
-};
-
-const GetItemSize = (index) => {
-	let curSize = 0;
-	if (CalculateItemSizeFunc != undefined) {
-		if (itemSizeList[index] != undefined && itemSizeList[index] != -1) {
-			curSize = itemSizeList[index];
-		}
-		else {
-			curSize = CalculateItemSizeFunc(index);
-			itemSizeList[index] = curSize;
-		}
-	}
-	else curSize = itemSize;
-	return curSize;
-};
-
-export const SetOnStartFunc = (onStart) => {
-	onStartFunc = onStart;
-};
-
-export const SetOnEndFunc = (onEnd) => {
-	onEndFunc = onEnd;
-};
-
-const OnScroll = (event) => {
-	// const { clientHeight, scrollHeight, scrollTop } = event.currentTarget;
-	const { scrollLeft, scrollTop } = event.currentTarget;
-	// console.log('================== scrollLeft:  ', scrollLeft);
-	// console.log('================== scrollTop  ', scrollTop);
-	if (scorllDirection == Direction.Horizontal) {
-		if (scrollLeft == 0) {
-			if (onStartFunc != undefined) {
-				onStartFunc();
-				Leftward();
-				return;
-			}
-		}
-		else if (scrollLeft > 0 && scrollLeft + viewWidth >= endBoundary) {
-			if (onEndFunc != undefined) {
-				// console.log("----------onEndFunc  viewDiv scrollLeft:", scrollLeft,  "------------");
-				// console.log("----------onEndFunc   endBoundary:", endBoundary,  "------------");
-
-				// console.log("---------- onEndFunc viewDiv top:", viewDiv.scrollTop,  "------------");
-				onEndFunc();
-				// Rightward();
-				return;
-			}
-		}
-		const distance = scrollLeft - curScrollOffset;
-		curScrollOffset = scrollLeft;
-		if (distance >= MOVE_DELTA) {
-			Leftward();
-		}
-		else if (distance < -MOVE_DELTA) {
-			Rightward();
-		}
-	}
-	else {
-		if (scrollTop == 0) {
-			if (onStartFunc != undefined) {
-				onStartFunc();
-				Forward();
-				return;
-			}
-		}
-		else if (scrollTop > 0 && scrollTop + viewHeight >= endBoundary) {
-			if (onEndFunc != undefined) {
-				onEndFunc();
-				return;
-			}
-		}
-		const distance = scrollTop - curScrollOffset;
-		curScrollOffset = scrollTop;
-		if (distance >= MOVE_DELTA) {
-			Forward();
-		}
-		else if (distance < -MOVE_DELTA) {
-			BackWard();
-		}
-	}
-};
-
-export const AppendList = (count) => {
-	const curIndex = itemCount;
-	itemCount = itemCount + count;
-	InitItemsSize(curIndex, itemCount);
-	if (scorllDirection == Direction.Horizontal) Leftward();
-	else Forward();
-};
-
-export const Refresh = (count) => {
-	RecycleAll();
-	itemCount = count;
-	itemSizeList = [];
-	InitItemsSize(0, itemCount);
-	curScrollOffset = 0;
-	viewDiv.scrollTop = 0;
-	Fill();
-};
-
-const Fill = () => {
-	// console.log("----------  fillItem  ------------")
-	startIndex = 0;
-	endIndex = -1;
-	startBoundary = 0;
-	endBoundary = 0;
-	containerHeight = 0;
-	containerWidth = 0;
-	curScrollOffset = 0;
-
-	if (scorllDirection == Direction.Horizontal) Leftward();
-	else Forward();
-
-	// console.log("----------  viewDiv left:", viewDiv.scrollLeft,  "------------");
-	// console.log("----------  viewDiv top:", viewDiv.scrollTop,  "------------");
-};
-
-const CreateItem = (index) => {
-	let item;
-	// console.log('CreateItem  pool size:', itemPool.length)
-	if (itemPool.length > 0) {
-		// console.log("----------  useItemPool  ------------")
-		item = itemPool.pop(item); //itemPool[0];
-		item.id = 'item_' + index;
-		fillItemFunc(item, index);
-	}
-	else {
-		// console.log("----------  itemPool is null!!!  ------------")
-		if (fillItemFunc != undefined) {
-			item = document.createElement('div');
-			item.id = 'item_' + index;
-			fillItemFunc(item, index);
-			contentDiv.appendChild(item);
-		}
-		const curSize = GetItemSize(index);
-		if (scorllDirection == Direction.Horizontal) {
-			item.style.width = `${curSize}`;
-		}
-		else {
-			// console.log("----------  curSize:",curSize," ------------")
-			item.style.height = `${curSize}`;
-		}
-	}
-	return item;
-};
-
-const Forward = () => {
-	// console.log("----------  Forward  ------------")
-	// console.log("----------  endBoundary:",endBoundary, curScrollOffset, endIndex, "  ------------")
-	// console.log("----------  itemCount:",itemCount, "  ------------")
-	// console.log("---------- boundary:",curScrollOffset + viewHeight + cacheNumber*defaultItemSize , "  ------------")
-	while (endIndex < itemCount - 1 && endBoundary < curScrollOffset + viewHeight + cacheNumber * defaultItemSize) {
-		//itemSize
-		endIndex++;
-		let item = CreateItem(endIndex);
-		itemMap[`${endIndex}`] = item;
-		SetItemPosition(item, endBoundary);
-		RefreshEndBundary();
-		CalculateContentSize();
-	}
-	RecycleBegin();
-};
-
-const BackWard = () => {
-	// console.log("----------  BackWard  ------------")
-	// console.log("----------  startBoundary:",startBoundary, curScrollOffset, startIndex, "  ------------")
-	while (startIndex > 0 && curScrollOffset <= startBoundary) {
-		startIndex--;
-		let item = CreateItem(startIndex);
-		itemMap[`${startIndex}`] = item;
-		let height = 0;
-		height = GetItemSize(startIndex);
-		SetItemPosition(item, startBoundary - height);
-		RefreshBeginBundary();
-	}
-	RecycleEnd();
-};
-
-const Leftward = () => {
-	// console.log("----------  Leftward  ------------")
-	// console.log("----------  endBoundary:",endBoundary, curScrollOffset, endIndex, "  ------------")
-	while (endIndex < itemCount - 1 && endBoundary < curScrollOffset + viewWidth + cacheNumber * defaultItemSize) {
-		//
-		endIndex++;
-		// console.log("----------  endIndex:",  endIndex,"  ------------")
-		let item = CreateItem(endIndex);
-		itemMap[`${endIndex}`] = item;
-		SetItemPosition(item, endBoundary);
-		RefreshEndBundary();
-		CalculateContentSize();
-	}
-	RecycleBegin();
-};
-
-const Rightward = () => {
-	// console.log("----------  Rightward  ------------")
-	// console.log("----------  startBoundary:",startBoundary, curScrollOffset, startIndex, "  ------------")
-	while (startIndex > 0 && curScrollOffset <= startBoundary) {
-		startIndex--;
-		let item = CreateItem(startIndex);
-		itemMap[`${startIndex}`] = item;
-		let width = 0;
-		width = GetItemSize(startIndex);
-		SetItemPosition(item, startBoundary - width);
-		RefreshBeginBundary();
-	}
-	RecycleEnd();
-};
-
-const SetItemPosition = (item, itemPos) => {
-	// console.log("---------- SetItemPosition itemPos:",itemPos,"  ------------")
-	if (scorllDirection == Direction.Horizontal) {
-		// console.log("---------- scorllDirection == Direction.Horizontal  ------------")
-		item.style.left = `${itemPos}`;
-	}
-	else item.style.top = `${itemPos}`;
-};
-
-const RefreshEndBundary = () => {
-	// console.log("----------@@@ endIndex :",endIndex,"  ------------")
-	// console.log("----------@@@  RefreshEndBundary:",endBoundary,"  ------------")
-	let item = itemMap[`${endIndex}`];
-	if (scorllDirection == Direction.Horizontal) {
-		let curLeft = parseInt(item.style.left);
-		let width = 0;
-		width = GetItemSize(endIndex);
-		endBoundary = curLeft + width;
-	}
-	else {
-		let curTop = parseInt(item.style.top);
-		let height = 0;
-		height = GetItemSize(endIndex);
-		endBoundary = curTop + height;
-	}
-};
-
-const RefreshBeginBundary = () => {
-	if (CalculateItemSizeFunc != undefined) {
-		startBoundary = GetItemsRange(0, startIndex - 1);
-	}
-	else startBoundary = itemSize * startIndex;
-};
-
-const CalculateContentSize = () => {
-	if (scorllDirection == Direction.Horizontal) {
-		containerWidth = endBoundary;
-		contentDiv.style.width = `${containerWidth}`;
-	}
-	else {
-		containerHeight = endBoundary;
-		contentDiv.style.height = `${containerHeight}`;
-	}
-	// console.log("----------CalculateContentSize height:",height,"------------")
-};
-
-const IsItemUpOfViewport = (index, item) => {
-	let itemOffset = 0;
-	if (scorllDirection == Direction.Horizontal) itemOffset = parseInt(item.style.left);
-	else itemOffset = parseInt(item.style.top);
-
-	let curSize = 0;
-	if (CalculateItemSizeFunc != undefined) {
-		curSize = CalculateItemSizeFunc(index);
-	}
-	else curSize = itemSize;
-	if (itemOffset + curSize < curScrollOffset) {
-		// console.log("----------IsItemUpOfViewport true------------")
-		return true;
-	}
-	else {
-		// console.log("----------IsItemUpOfViewport false------------")
-		return false;
-	}
-};
-
-const IsItemBottomOfViewport = (item) => {
-	let itemOffset = 0;
-	if (scorllDirection == Direction.Horizontal) {
-		itemOffset = parseInt(item.style.left);
-		if (itemOffset > curScrollOffset + viewWidth) {
-			return true;
-		}
-		else {
-			// console.log("----------IsItemBottomOfViewport false------------")
-			return false;
-		}
-	}
-	else {
-		itemOffset = parseInt(item.style.top);
-		if (itemOffset > curScrollOffset + viewHeight) {
-			return true;
-		}
-		else {
-			// console.log("----------IsItemBottomOfViewport false------------")
-			return false;
-		}
-	}
-};
-
-const RecycleBegin = () => {
-	// if(IsInRange())
-	// {
-	//     return;
-	// }
-	let i = startIndex;
-	while (i <= endIndex) {
-		let item = itemMap[`${i}`];
-		if (item != undefined) {
-			if (IsItemUpOfViewport(i, item)) {
-				if (scorllDirection == Direction.Horizontal) item.style.left = `${-viewWidth}`;
-				else item.style.top = `${-viewHeight}`;
-				console.log('push item');
-				itemPool.push(item);
-				startIndex++;
-			}
-		}
-		else {
-			break;
-		}
-		i++;
-	}
-	RefreshBeginBundary();
-	// console.log("----------RecycleBegin startIndex：",startIndex,"------------")
-};
-
-const RecycleEnd = () => {
-	// if(IsInRange())
-	// {
-	//     return;
-	// }
-
-	let i = endIndex;
-	while (i >= startIndex) {
-		let item = itemMap[`${i}`];
-		if (item != undefined) {
-			if (IsItemBottomOfViewport(item)) {
-				if (scorllDirection == Direction.Horizontal) item.style.left = `${-viewWidth}`;
-				else item.style.top = `${-viewHeight}`;
-				itemPool.push(item);
-				endIndex--;
-			}
-		}
-		else {
-			break;
-		}
-		i--;
-	}
-	RefreshEndBundary();
-};
-
-const IsInRange = () => {
-	let isInRange = true;
-	const range = GetItemsRange(startIndex, endIndex - 1);
-	if (scorllDirection == Direction.Horizontal) {
-		if (range < viewWidth) isInRange = false;
-	}
-	else {
-		if (range < viewHeight) isInRange = false;
-	}
-	return isInRange;
-};
-
-const GetItemsRange = (start, end) => {
-	let range = 0;
-	for (let begin = start; begin <= end; begin++) {
-		if (itemMap[`${begin}`] != undefined) {
-			range = range + GetItemSize(begin);
-		}
-	}
-	return range;
-};
-
-const RecycleAll = () => {
-	// console.log("-----------------  RecycleAll  ---------------- ")
-	for (let i = startIndex; i < endIndex; i++) {
-		let item = itemMap[`${i}`];
-		if (item != undefined) {
-			if (scorllDirection == Direction.Horizontal) item.style.left = `${-viewWidth}`;
-			else item.style.top = `${-viewHeight}`;
-			// console.log('push item');
-			itemPool.push(item);
-		}
-	}
-};
+export const Direction = {
+	Horizontal: 0,
+	Vertical: 1,
+};
+
+Object.freeze(Direction);
+
+let startIndex = 0;
+let endIndex = -1;
+let startBoundary = 0;
+let endBoundary = 0;
+let containerWidth = 0;
+let viewHeight = 0;
+let viewWidth = 0;
+let containerHeight = 0;
+let scorllDirection = Direction.Vertical;
+
+let itemSize = 0;
+let defaultItemSize = 200;
+
+let viewDiv;
+let contentDiv;
+
+let itemCount = 0;
+let itemPool = [];
+let itemMap = {};
+let itemSizeList = [];
+let MOVE_DELTA = 0; //要设置的比较小才有效
+let curScrollOffset = 0;
+let fillItemFunc;
+let onStartFunc;
+let onEndFunc;
+let CalculateItemSizeFunc;
+
+let cacheNumber = 0; //多缓存几个数量
+
+//root：该瀑布流组件根节点
+//count：当前列表的数量
+//viewSize:瀑布流组件viewSize，高或宽超出部分不显示
+//direction:方向，暂时仅支持垂直
+//calculatedSize:单元格固定尺寸，可设置为一个计算单元格高度的函数。
+//cacheNum:滑动过快的话，可稍微增加几个缓存，设置缓存数量。
+//fillFunc:填充具体对应的Item函数委托
+export const CreateList = (root, count, viewSize, direction, calculatedSize, cacheNum, fillFunc) => {
+	if (root != undefined) {
+		itemCount = count;
+		scorllDirection = direction;
+		cacheNumber = cacheNum;
+		if (typeof calculatedSize == 'function') {
+			// console.log('---------------    itemSize is Funtion -------------------')
+			CalculateItemSizeFunc = calculatedSize;
+		}
+		else {
+			// console.log('---------------    itemSize is size Num -------------------')
+			itemSize = calculatedSize;
+		}
+		viewDiv = document.createElement('div');
+		viewDiv.style.position = 'relative';
+		viewDiv.style.overflow = 'scroll';
+		viewDiv.style.willChange = 'transform';
+		viewDiv.style.left = '0px';
+		viewDiv.style.top = '0px';
+
+		viewDiv.addEventListener('scroll', OnScroll);
+		root.appendChild(viewDiv);
+		//创建一个contener
+		contentDiv = document.createElement('div');
+
+		if (scorllDirection == Direction.Horizontal) {
+			viewWidth = viewSize;
+			viewDiv.style.flexDirection = 'row';
+			// viewDiv.style.height = `100%`;
+			viewDiv.style.height = '400px';
+			viewDiv.style.width = `${viewSize}px`;
+			viewWidth = viewSize;
+			contentDiv.style.height = '100%';
+		}
+		else {
+			viewDiv.style.flexDirection = 'column';
+			viewDiv.style.height = `${viewSize}px`;
+			viewDiv.style.width = '100%';
+			viewHeight = viewSize;
+			contentDiv.style.width = '100%';
+		}
+		viewDiv.appendChild(contentDiv);
+		InitItemsSize(0, itemCount);
+		fillItemFunc = fillFunc;
+		itemMap = {};
+		Fill();
+	}
+	else console.log('----------  未能找到瀑布流组件根节点！！！！  ------------');
+	return viewDiv;
+};
+
+const InitItemsSize = (begin, end) => {
+	for (let i = begin; i < end; i++) {
+		itemSizeList[i] = -1;
+	}
+};
+
+const GetItemSize = (index) => {
+	let curSize = 0;
+	if (CalculateItemSizeFunc != undefined) {
+		if (itemSizeList[index] != undefined && itemSizeList[index] != -1) {
+			curSize = itemSizeList[index];
+		}
+		else {
+			curSize = CalculateItemSizeFunc(index);
+			itemSizeList[index] = curSize;
+		}
+	}
+	else curSize = itemSize;
+	return curSize;
+};
+
+export const SetOnStartFunc = (onStart) => {
+	onStartFunc = onStart;
+};
+
+export const SetOnEndFunc = (onEnd) => {
+	onEndFunc = onEnd;
+};
+
+const OnScroll = (event) => {
+	// const { clientHeight, scrollHeight, scrollTop } = event.currentTarget;
+	const { scrollLeft, scrollTop } = event.currentTarget;
+	// console.log('================== scrollLeft:  ', scrollLeft);
+	// console.log('================== scrollTop  ', scrollTop);
+	if (scorllDirection == Direction.Horizontal) {
+		if (scrollLeft == 0) {
+			if (onStartFunc != undefined) {
+				onStartFunc();
+				Leftward();
+				return;
+			}
+		}
+		else if (scrollLeft > 0 && scrollLeft + viewWidth >= endBoundary) {
+			if (onEndFunc != undefined) {
+				// console.log("----------onEndFunc  viewDiv scrollLeft:", scrollLeft,  "------------");
+				// console.log("----------onEndFunc   endBoundary:", endBoundary,  "------------");
+
+				// console.log("---------- onEndFunc viewDiv top:", viewDiv.scrollTop,  "------------");
+				onEndFunc();
+				// Rightward();
+				return;
+			}
+		}
+		const distance = scrollLeft - curScrollOffset;
+		curScrollOffset = scrollLeft;
+		if (distance >= MOVE_DELTA) {
+			Leftward();
+		}
+		else if (distance < -MOVE_DELTA) {
+			Rightward();
+		}
+	}
+	else {
+		if (scrollTop == 0) {
+			if (onStartFunc != undefined) {
+				onStartFunc();
+				Forward();
+				return;
+			}
+		}
+		else if (scrollTop > 0 && scrollTop + viewHeight >= endBoundary) {
+			if (onEndFunc != undefined) {
+				onEndFunc();
+				return;
+			}
+		}
+		const distance = scrollTop - curScrollOffset;
+		curScrollOffset = scrollTop;
+		if (distance >= MOVE_DELTA) {
+			Forward();
+		}
+		else if (distance < -MOVE_DELTA) {
+			BackWard();
+		}
+	}
+};
+
+export const AppendList = (count) => {
+	const curIndex = itemCount;
+	itemCount = itemCount + count;
+	InitItemsSize(curIndex, itemCount);
+	if (scorllDirection == Direction.Horizontal) Leftward();
+	else Forward();
+};
+
+export const Refresh = (count) => {
+	RecycleAll();
+	itemCount = count;
+	itemSizeList = [];
+	InitItemsSize(0, itemCount);
+	curScrollOffset = 0;
+	viewDiv.scrollTop = 0;
+	Fill();
+};
+
+const Fill = () => {
+	// console.log("----------  fillItem  ------------")
+	startIndex = 0;
+	endIndex = -1;
+	startBoundary = 0;
+	endBoundary = 0;
+	containerHeight = 0;
+	containerWidth = 0;
+	curScrollOffset = 0;
+
+	if (scorllDirection == Direction.Horizontal) Leftward();
+	else Forward();
+
+	// console.log("----------  viewDiv left:", viewDiv.scrollLeft,  "------------");
+	// console.log("----------  viewDiv top:", viewDiv.scrollTop,  "------------");
+};
+
+const CreateItem = (index) => {
+	let item;
+	// console.log('CreateItem  pool size:', itemPool.length)
+	if (itemPool.length > 0) {
+		// console.log("----------  useItemPool  ------------")
+		item = itemPool.pop(item); //itemPool[0];
+		item.id = 'item_' + index;
+		fillItemFunc(item, index);
+	}
+	else {
+		// console.log("----------  itemPool is null!!!  ------------")
+		if (fillItemFunc != undefined) {
+			item = document.createElement('div');
+			item.id = 'item_' + index;
+			fillItemFunc(item, index);
+			contentDiv.appendChild(item);
+		}
+		const curSize = GetItemSize(index);
+		if (scorllDirection == Direction.Horizontal) {
+			item.style.width = `${curSize}`;
+		}
+		else {
+			// console.log("----------  curSize:",curSize," ------------")
+			item.style.height = `${curSize}`;
+		}
+	}
+	return item;
+};
+
+const Forward = () => {
+	// console.log("----------  Forward  ------------")
+	// console.log("----------  endBoundary:",endBoundary, curScrollOffset, endIndex, "  ------------")
+	// console.log("----------  itemCount:",itemCount, "  ------------")
+	// console.log("---------- boundary:",curScrollOffset + viewHeight + cacheNumber*defaultItemSize , "  ------------")
+	while (endIndex < itemCount - 1 && endBoundary < curScrollOffset + viewHeight + cacheNumber * defaultItemSize) {
+		//itemSize
+		endIndex++;
+		let item = CreateItem(endIndex);
+		itemMap[`${endIndex}`] = item;
+		SetItemPosition(item, endBoundary);
+		RefreshEndBundary();
+		CalculateContentSize();
+	}
+	RecycleBegin();
+};
+
+const BackWard = () => {
+	// console.log("----------  BackWard  ------------")
+	// console.log("----------  startBoundary:",startBoundary, curScrollOffset, startIndex, "  ------------")
+	while (startIndex > 0 && curScrollOffset <= startBoundary) {
+		startIndex--;
+		let item = CreateItem(startIndex);
+		itemMap[`${startIndex}`] = item;
+		let height = 0;
+		height = GetItemSize(startIndex);
+		SetItemPosition(item, startBoundary - height);
+		RefreshBeginBundary();
+	}
+	RecycleEnd();
+};
+
+const Leftward = () => {
+	// console.log("----------  Leftward  ------------")
+	// console.log("----------  endBoundary:",endBoundary, curScrollOffset, endIndex, "  ------------")
+	while (endIndex < itemCount - 1 && endBoundary < curScrollOffset + viewWidth + cacheNumber * defaultItemSize) {
+		//
+		endIndex++;
+		// console.log("----------  endIndex:",  endIndex,"  ------------")
+		let item = CreateItem(endIndex);
+		itemMap[`${endIndex}`] = item;
+		SetItemPosition(item, endBoundary);
+		RefreshEndBundary();
+		CalculateContentSize();
+	}
+	RecycleBegin();
+};
+
+const Rightward = () => {
+	// console.log("----------  Rightward  ------------")
+	// console.log("----------  startBoundary:",startBoundary, curScrollOffset, startIndex, "  ------------")
+	while (startIndex > 0 && curScrollOffset <= startBoundary) {
+		startIndex--;
+		let item = CreateItem(startIndex);
+		itemMap[`${startIndex}`] = item;
+		let width = 0;
+		width = GetItemSize(startIndex);
+		SetItemPosition(item, startBoundary - width);
+		RefreshBeginBundary();
+	}
+	RecycleEnd();
+};
+
+const SetItemPosition = (item, itemPos) => {
+	// console.log("---------- SetItemPosition itemPos:",itemPos,"  ------------")
+	if (scorllDirection == Direction.Horizontal) {
+		// console.log("---------- scorllDirection == Direction.Horizontal  ------------")
+		item.style.left = `${itemPos}`;
+	}
+	else item.style.top = `${itemPos}`;
+};
+
+const RefreshEndBundary = () => {
+	// console.log("----------@@@ endIndex :",endIndex,"  ------------")
+	// console.log("----------@@@  RefreshEndBundary:",endBoundary,"  ------------")
+	let item = itemMap[`${endIndex}`];
+	if (scorllDirection == Direction.Horizontal) {
+		let curLeft = parseInt(item.style.left);
+		let width = 0;
+		width = GetItemSize(endIndex);
+		endBoundary = curLeft + width;
+	}
+	else {
+		let curTop = parseInt(item.style.top);
+		let height = 0;
+		height = GetItemSize(endIndex);
+		endBoundary = curTop + height;
+	}
+};
+
+const RefreshBeginBundary = () => {
+	if (CalculateItemSizeFunc != undefined) {
+		startBoundary = GetItemsRange(0, startIndex - 1);
+	}
+	else startBoundary = itemSize * startIndex;
+};
+
+const CalculateContentSize = () => {
+	if (scorllDirection == Direction.Horizontal) {
+		containerWidth = endBoundary;
+		contentDiv.style.width = `${containerWidth}`;
+	}
+	else {
+		containerHeight = endBoundary;
+		contentDiv.style.height = `${containerHeight}`;
+	}
+	// console.log("----------CalculateContentSize height:",height,"------------")
+};
+
+const IsItemUpOfViewport = (index, item) => {
+	let itemOffset = 0;
+	if (scorllDirection == Direction.Horizontal) itemOffset = parseInt(item.style.left);
+	else itemOffset = parseInt(item.style.top);
+
+	let curSize = 0;
+	if (CalculateItemSizeFunc != undefined) {
+		curSize = CalculateItemSizeFunc(index);
+	}
+	else curSize = itemSize;
+	if (itemOffset + curSize < curScrollOffset) {
+		// console.log("----------IsItemUpOfViewport true------------")
+		return true;
+	}
+	else {
+		// console.log("----------IsItemUpOfViewport false------------")
+		return false;
+	}
+};
+
+const IsItemBottomOfViewport = (item) => {
+	let itemOffset = 0;
+	if (scorllDirection == Direction.Horizontal) {
+		itemOffset = parseInt(item.style.left);
+		if (itemOffset > curScrollOffset + viewWidth) {
+			return true;
+		}
+		else {
+			// console.log("----------IsItemBottomOfViewport false------------")
+			return false;
+		}
+	}
+	else {
+		itemOffset = parseInt(item.style.top);
+		if (itemOffset > curScrollOffset + viewHeight) {
+			return true;
+		}
+		else {
+			// console.log("----------IsItemBottomOfViewport false------------")
+			return false;
+		}
+	}
+};
+
+const RecycleBegin = () => {
+	// if(IsInRange())
+	// {
+	//     return;
+	// }
+	let i = startIndex;
+	while (i <= endIndex) {
+		let item = itemMap[`${i}`];
+		if (item != undefined) {
+			if (IsItemUpOfViewport(i, item)) {
+				if (scorllDirection == Direction.Horizontal) item.style.left = `${-viewWidth}`;
+				else item.style.top = `${-viewHeight}`;
+				console.log('push item');
+				itemPool.push(item);
+				startIndex++;
+			}
+		}
+		else {
+			break;
+		}
+		i++;
+	}
+	RefreshBeginBundary();
+	// console.log("----------RecycleBegin startIndex：",startIndex,"------------")
+};
+
+const RecycleEnd = () => {
+	// if(IsInRange())
+	// {
+	//     return;
+	// }
+
+	let i = endIndex;
+	while (i >= startIndex) {
+		let item = itemMap[`${i}`];
+		if (item != undefined) {
+			if (IsItemBottomOfViewport(item)) {
+				if (scorllDirection == Direction.Horizontal) item.style.left = `${-viewWidth}`;
+				else item.style.top = `${-viewHeight}`;
+				itemPool.push(item);
+				endIndex--;
+			}
+		}
+		else {
+			break;
+		}
+		i--;
+	}
+	RefreshEndBundary();
+};
+
+const IsInRange = () => {
+	let isInRange = true;
+	const range = GetItemsRange(startIndex, endIndex - 1);
+	if (scorllDirection == Direction.Horizontal) {
+		if (range < viewWidth) isInRange = false;
+	}
+	else {
+		if (range < viewHeight) isInRange = false;
+	}
+	return isInRange;
+};
+
+const GetItemsRange = (start, end) => {
+	let range = 0;
+	for (let begin = start; begin <= end; begin++) {
+		if (itemMap[`${begin}`] != undefined) {
+			range = range + GetItemSize(begin);
+		}
+	}
+	return range;
+};
+
+const RecycleAll = () => {
+	// console.log("-----------------  RecycleAll  ---------------- ")
+	for (let i = startIndex; i < endIndex; i++) {
+		let item = itemMap[`${i}`];
+		if (item != undefined) {
+			if (scorllDirection == Direction.Horizontal) item.style.left = `${-viewWidth}`;
+			else item.style.top = `${-viewHeight}`;
+			// console.log('push item');
+			itemPool.push(item);
+		}
+	}
+};