1.4中类型(grid_type)的卡片:1:大方块;2:竖长块;3:横长块;4:小方块

var order = 0;

// 创建链表
function List(head) {
this.head = new Node(head);
this.insert = insert;
this.find = find;
this.getNeed = getNeed;
this.position = position;
this.node = 0;
} // 创建节点
function Node(data) {
this.pre = null;
this.next = null;
this.type = data.grid_type;
this.need = [];
this.data = data;
this.arr = [[data]];
this.size = data.grid_type === 3 ? 2 : data.grid_type;
this.top = 0;
this.left = 0;
this.index = order;
} // 查找节点
function find(data, cur) {
while (!cur.need.includes(data.grid_type)) {
if (cur.next === null) {
return this.insert(cur, data);
} else {
cur = cur.next;
}
}
// 将数据添加到arr后,清空need对应得grid_type
// 如果前两个盒子是type1,那么第三个盒子不能是type2(竖方块)
if (
cur.data.grid_type === 1 &&
cur.arr[1] &&
cur.arr[1][0].grid_type === 1 &&
data.grid_type === 2
) {
if (cur.next === null) {
return this.insert(cur, data);
} else {
this.find(data, cur.next);
}
}
// 如果前一个盒子是type1,那么第二个盒子不能是type3(横方块)
if (cur.data.grid_type === 1 && data.grid_type === 3) {
if (cur.next === null) {
return this.insert(cur, data);
} else {
this.find(data, cur.next);
}
}
let size = cur.size;
let num = data.grid_type === 3 ? 2 : data.grid_type;
let total = size + num;
if (total <= 4) {
let len = cur.arr.length;
cur.arr[len] = [];
cur.arr[len][0] = data; cur.size += num;
let index = cur.need.indexOf(data.grid_type);
if (total === 4) {
cur.need = [];
} else {
cur.need.splice(index, 1);
}
} else {
return this.insert(cur, data);
}
} // 插入节点
function insert(cur, data) {
let newOne = new Node(data);
newOne.next = cur.next;
newOne.pre = cur;
cur.next = newOne;
newOne.need = this.getNeed(data);
this.node++;
newOne.index = this.node;
} // 需要得盒子
function getNeed(data) {
let type = data.grid_type;
if (type === 1) {
return [1, 1, 1, 3];
} else if (type === 2) {
return [1, 1, 2];
} else if (type === 3) {
return [1, 1, 3];
} else {
return [];
}
} // 位置信息
//half总数据得一半
function position(half) {
let cur = this.head;
let top = 0;
let box = [];
while (cur.next !== null) {
if (cur.index < half) {
p(cur.arr, cur.index, top);
box.push(cur.arr);
cur = cur.next;
} else {
top = 388;
let index = cur.index - half; //剩下得部分
p(cur.arr, index, top);
box.push(cur.arr);
cur = cur.next;
}
}
return box;
} /*
arr[[{data},{position}],[]]
*/
function p(arr, index, baseTop) {
let len = arr.length;
let base = index * 388;
arr.map(function(item, i) {
arr[i][1] = {};
arr[i][1].top = baseTop;
});
arr[0][1].left = base;
if (len === 4) {
arr[1][1].left = base + 194;
arr[2][1].left = base;
arr[2][1].top = baseTop + 194;
arr[3][1].top = baseTop + 194;
arr[3][1].left = base + 194;
} else if (len === 2) {
let flag = "";
arr.map(function(item, i) {
if (item[0].grid_type === 2) {
flag = "v";
} else if (item[0].grid_type === 3) {
flag = "h";
} else {
flag = "s";
}
});
if (flag == "s" || flag == "v") {
arr[1][1].left = base + 174;
} else if (flag === "h") {
arr[1][1].top = baseTop + 194;
arr[1][1].left = base;
}
} else if (len === 3) {
if (arr[0][0].grid_type === 1) {
if (arr[1][0].grid_type === 1) {
arr[1][1].left = base + 194;
arr[2][1].left = base;
arr[2][1].top = baseTop + 194;
} else {
arr[1][1].left = base;
arr[2][1].left = base;
arr[2][1].top = baseTop + 194;
}
} else if (arr[0][0].grid_type === 2) {
arr[1][1].left = index * 388 + 194;
arr[2][1].left = index * 388 + 194;
arr[2][1].top = baseTop + 194;
} else if (arr[0][0].grid_type === 3) {
arr[1][1].left = index * 388;
arr[1][1].top = baseTop + 194;
arr[2][1].left = index * 388 + 194;
arr[2][1].top = baseTop + 194;
}
}
} function list(data) {
let newList = new List(data[0]);
newList.head.need = newList.getNeed(newList.head.data);
for (var i = 1; i < data.length; i++) {
newList.find(data[i], newList.head);
}
let half = Math.ceil(newList.node / 2);
newList.position(half);
let finalData = allArr(newList.head); return finalData;
} function allArr(head) {
let finalData = [];
let cur = head;
while (cur.next !== null) {
finalData.push(cur.arr);
cur = cur.next;
}
return finalData;
} export default list;

双向链表--首页大小不一卡片排序 --- react --- js的更多相关文章

  1. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  2. react.js 你应知道的9件事

    React.js 初学者应该知道的 9 件事   本文假定你已经有了一下基本的概念.如果你不熟悉 component.props 或者 state 这些名词,你最好先去阅读下官方起步和手册.下面的代码 ...

  3. React.js学习

    React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...

  4. php文件管理,能够点击依照时间,大小,名称排序

    php文件管理.能够点击依照时间.大小,名称排序  本例没实用到jquery 演示   PHP Code <?php    $rootdir="./";    $spacen ...

  5. React JS和React-Native学习指南

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南本指南汇集React- ...

  6. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  7. React.js 小书 Lesson22 - props.children 和容器类组件

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...

  8. React.js基础知识

    一. react.js的基本使用方法 (1)快速使用,hello world <div id="app"></div> <script src=&qu ...

  9. Web框架概述——React.js

    目前,在前端Web开发中,三大热门框架为React.js,Vue.js,Angular.js .当然,三大框架各有各的优缺点,这里就不多说了,下面我就针对前段时间所学的React框架做一下整体知识点的 ...

随机推荐

  1. 力扣(LeetCode)15. 三数之和

    给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以包含重复的三元组. ...

  2. python中configparser模块的使用

    configparser模块用于生成和修改常见配置文档,当前模块的名称在 python 3.x 版本中变更为 configparser. 首先要写一个如下所示的配置文件: [DEFAULT] serv ...

  3. legend2---开发日志4(常用的链接传值方式有哪些)

    legend2---开发日志4(常用的链接传值方式有哪些) 一.总结 一句话总结:常用的其实就是get和post,不过有具体细分 a标签 post表单 js方式拼接url 1.js正则尽量少匹配的符号 ...

  4. (10)进程---Manager数据共享

    Manager  能够实现进程之间的数据共享(dict list),但是必须上锁来确保数据的准确性, 队列则可以实现进程之间数据通信 from multiprocessing import Proce ...

  5. change color

    关于DataGridView行和列的背景色-前景色设置 1.设定DataGridView全部单元格的Style   DataGridView内所有单元格的Style变更,可以使用DataGridVie ...

  6. clustering

    搞了将近一年的单细胞,聚类也是自认为得心应手了,自信满满. 但是多半是跑软件,对聚类的深层次的思想不甚了了. Google了一下clustering,看了一篇文章,突然了解到了clustering的算 ...

  7. java.——最大子序列和(前提是:全部都是非负数)

    直接上代码吧: 情况一:全部是非负数整数的时候,其实非负实数处理也一样. package Person; import java.util.Scanner; public class Main{   ...

  8. 【洛谷p2430】严酷的训练

    (这个题有一个很神奇的地方) 严酷的训练[传送门] 算法标签(显然01背包了最近一直在练) (他居然没写……) 这个题啊,试了好几遍没a 最后发现在第二层循环的时候应该是j>=rqyt[p[i] ...

  9. 路由器固定IP配置

    前言 路由器插入好电源,插入好网线,笔记本连接路由器的wifi,连接成功后,网页自动打开. 1.在网页自动输入管理员密码 2.上网方式选择固定IP地址,输入IP地址,子网掩码,默认网关,DNS服务 3 ...

  10. Hadoop介绍-4.Hadoop中NameNode、DataNode、Secondary、NameNode、JobTracker TaskTracker

    Hadoop是一个能够对大量数据进行分布式处理的软体框架,实现了Google的MapReduce编程模型和框架,能够把应用程式分割成许多的 小的工作单元,并把这些单元放到任何集群节点上执行.在MapR ...