|
|
@@ -10,7 +10,73 @@
|
|
|
}
|
|
|
let temp = GetQueryString('m')
|
|
|
|
|
|
- for(let k in objInfo){
|
|
|
+
|
|
|
+ // 获取总数组
|
|
|
+ const arrAll = []
|
|
|
+ for (let k in objInfo) {
|
|
|
+ arrAll.push({
|
|
|
+ id: k,
|
|
|
+ name: objInfo[k]
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 开启了分页得到的数组
|
|
|
+ let arr = []
|
|
|
+ // 总数组分割
|
|
|
+ let arrSpile = []
|
|
|
+
|
|
|
+
|
|
|
+ if (pageOpen) {
|
|
|
+ // 数据的总数
|
|
|
+ const total = arrAll.length
|
|
|
+
|
|
|
+ // 计算出分页的个数
|
|
|
+ const pageSize = Math.ceil(total / pageNum)
|
|
|
+ // 生成 分页 指示器
|
|
|
+ const body = document.querySelector('body')
|
|
|
+ const pageBox = document.createElement('div');
|
|
|
+ pageBox.classList.add('pageBox')
|
|
|
+ for (let i = 0; i < pageSize; i++) {
|
|
|
+ const pageBoxSon = document.createElement('div');
|
|
|
+ pageBoxSon.innerHTML = i + 1
|
|
|
+ pageBox.appendChild(pageBoxSon)
|
|
|
+
|
|
|
+ // 当前的裁剪数据-联合数组类型
|
|
|
+ arrSpile.push(arrAll.slice(i * pageNum, (i + 1) * pageNum))
|
|
|
+ }
|
|
|
+ body.appendChild(pageBox)
|
|
|
+
|
|
|
+ // 为分页绑定点击事件
|
|
|
+ const pageDomSonAll = document.querySelectorAll('.pageBox div')
|
|
|
+ pageDomSonAll.forEach((v, i) => {
|
|
|
+ v.addEventListener('click', () => {
|
|
|
+ pageDomCreateFu(i)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ } else arr = arrAll
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 向页面创建元素
|
|
|
+ const pageDomCreateFu = (acNum) => {
|
|
|
+
|
|
|
+ if (pageOpen) {
|
|
|
+ arr = arrSpile[acNum]
|
|
|
+ //高亮当前
|
|
|
+ const pageDomSonAll = document.querySelectorAll('.pageBox div')
|
|
|
+
|
|
|
+ pageDomSonAll.forEach(v => {
|
|
|
+ v.classList.remove('active')
|
|
|
+ })
|
|
|
+ pageDomSonAll[acNum].classList.add('active')
|
|
|
+ }
|
|
|
+
|
|
|
+ let ul = document.querySelector('.con');
|
|
|
+ ul.innerHTML = ''
|
|
|
+
|
|
|
+ arr.forEach(v => {
|
|
|
let li = document.createElement('li');
|
|
|
let divWrap = document.createElement('div');
|
|
|
let a = document.createElement('a');
|
|
|
@@ -19,19 +85,21 @@
|
|
|
divWrap.classList.add('case');
|
|
|
a.classList.add('link-a');
|
|
|
// 判断地址栏有没有参数，有的话就跳Model2，没有logo
|
|
|
- if(temp) a.href = `Model2.html?m=${k}`;
|
|
|
- else a.href = `Model.html?m=${k}`;
|
|
|
+ if (temp) a.href = `Model2.html?m=${v.id}`;
|
|
|
+ else a.href = `Model.html?m=${v.id}`;
|
|
|
div.classList.add('card-img');
|
|
|
- div.style = `background-image: url(images/${k}.jpg)`;
|
|
|
- p.innerHTML = objInfo[k];
|
|
|
+ div.style = `background-image: url(images/${v.id}.jpg)`;
|
|
|
+ p.innerHTML = v.name;
|
|
|
a.appendChild(div);
|
|
|
divWrap.appendChild(a);
|
|
|
li.appendChild(divWrap);
|
|
|
li.appendChild(p);
|
|
|
- fragment.appendChild(li);
|
|
|
- }
|
|
|
+ fragment.appendChild(li);
|
|
|
+ })
|
|
|
+ ul.appendChild(fragment);
|
|
|
+ }
|
|
|
+
|
|
|
+ pageDomCreateFu(0)
|
|
|
|
|
|
- let ul = document.querySelector('.con');
|
|
|
- ul.appendChild(fragment);
|
|
|
|
|
|
})()
|
