将数组中的对象按照浏览器的x/y轴的显示方式进行排序

最新推荐文章于 2022-09-20 13:31:16 发布

樊小书生

最新推荐文章于 2022-09-20 13:31:16 发布

阅读量573

点赞数

分类专栏： JavaScript 文章标签：浏览器对象排序 javaScript

本文链接：https://blog.csdn.net/fxss5201/article/details/67675469

版权

JavaScript 专栏收录该内容

86 篇文章 1 订阅

订阅专栏

假如说现在有一组图片用绝对定位的方式进行显示，top/left值是随机排列的，也就是说按照文档流查找到的图片和浏览器显示的顺序不一致，这个时候我们就需要将数组中的对象按照浏览器的x/y轴的显示方式进行排序。

浏览器的渲染是按照浏览器的x/y轴进行显示的，只有当一行显示完才会显示下一行，所以和我们现在写字的方式是一致的。

实际上将数组中的对象按照浏览器的x/y轴的显示方式进行排序，也就是将数组中的对象按照x/y的两个属性值进行排序，并且x的优先级大于y的优先级（必须先按照x轴显示、再按照y轴显示）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>将数组中的对象按照浏览器的x/y轴的显示方式进行排序</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
<script>
var getArray = [];
var array = [{index: 1, x: 1, y: 3},{index: 2, x: 3, y: 1},{index: 3, x: 2, y: 2},
            {index: 4, x: 2, y: 1},{index: 5, x: 1, y: 2},{index: 6, x: 3, y: 3},
            {index: 7, x: 3, y: 2},{index: 8, x: 2, y: 3},{index: 9, x: 1, y: 1}];
array = array.sort(compare("x"));
// 此处的3表示一行显示几列
array = sliceArray(array, 3);
$.each(array, function(i, n){
    n = n.sort(compare("y"));
    $.each(n, function(j, k){
        getArray.push(k);
    })
})
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
/*
 * 将一个数组分成几个同等长度的数组
 * array[分割的原数组]
 * size[每个子数组的长度]
 */
function sliceArray(array, size) {
    var result = [];
    for (var x = 0; x < Math.ceil(array.length / size); x++) {
        var start = x * size;
        var end = start + size;
        result.push(array.slice(start, end));
    }
    return result;
}   
console.log(getArray);
</script>   
</body>
</html>