如何获得元素相对于屏幕的位置（左或右）？

Question

我在网页上使用的是砖石型布局，我需要将出现在屏幕右侧的每个元素的样式与其他元素不同。这是我用来参考的 砌筑. 起初，我需要右侧元素向右浮动，并有不同的边距设置，由于我的项目高度变化很大，有时向左或向右点的元素并不是每次都以同样的方式交替。我使用bootstrap 3.3.7和JQuery 3.4.1.这是我的代码。

function checkContainer() {
    if ($(window).width() > 1200) {
        return 585;
    }
    else if ($(window).width() > 992) {
        return 485;
    }
    return $('.container').width();
}

var minColWidth = checkContainer();
var roots;

function onLoad() {
    var rootElements = document.getElementsByClassName('masonry-root');
    roots = Array.prototype.map.call(rootElements, function (rootElement) {
        var cellElements = rootElement.getElementsByClassName('masonry-cell');
        var cells = Array.prototype.map.call(cellElements, function (cellElement) {
            var style = getComputedStyle(cellElement);
            return {
                'element': cellElement,
                'outerHeight': parseInt(style.marginTop) + cellElement.offsetHeight + parseInt(style.marginBottom)
            };
        });
        return {
            'element': rootElement,
            'noOfColumns': 0,
            'cells': cells
        };
    });

    // do the first layout
    onResize();
}

function onResize() {
    for (let root of roots) {

        // only layout when the number of columns has changed
        var newNoOfColumns = Math.floor(root.element.offsetWidth / minColWidth);
        if (newNoOfColumns != root.noOfColumns) {

            // initialize
            root.noOfColumns = newNoOfColumns;
            var columns = Array.from(new Array(root.noOfColumns)).map(function (column) {
                return {
                    'cells': new Array(),
                    'outerHeight': 0
                };
            });

            // divide...
            for (let cell of root.cells) {
                var minOuterHeight = Math.min(...columns.map(function (column) {
                    return column.outerHeight;
                }));
                var column = columns.find(function (column) {
                    return column.outerHeight == minOuterHeight;
                });
                column.cells.push(cell);
                column.outerHeight += cell.outerHeight;
            }

            // calculate masonry height
            var masonryHeight = Math.max(...columns.map(function (column) {
                return column.outerHeight;
            }));

            // ...and conquer
            var order = 0;
            for (let column of columns) {
                for (let cell of column.cells) {
                    cell.element.style.order = order++;
                    // set the cell's flex-basis to 0
                    cell.element.style.flexBasis = 0;
                }
                // set flex-basis of the last cell to fill the
                // leftover space at the bottom of the column
                // to prevent the first cell of the next column
                // to be rendered at the bottom of this column
                column.cells[column.cells.length - 1].element.style.flexBasis = column.cells[column.cells.length - 1].element.offsetHeight + masonryHeight - column.outerHeight - 1 + 'px';
            }

            // set the masonry height to trigger
            // re-rendering of all cells over columns
            // one pixel more than the tallest column
            root.element.style.maxHeight = masonryHeight + 1 + 'px';

            console.log(columns.map(function (column) {
                return column.outerHeight;
            }));
            console.log(root.element.style.maxHeight);
        }
    }
}

// subscribe to load and resize events
window.addEventListener('load', onLoad);
window.addEventListener('resize', onResize);

.masonry-root {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.masonry-root .masonry-cell {
    flex: 1;
    margin: 4px;
}
.masonry-root .masonry-cell .masonry-item {
    height: auto;
}
.feed-content {
    width: 450px;
    position: relative;
    height: auto;
}

<div class="masonry-root">
    <div class="masonry-cell">
        <div class="masonry-item">
            <div class="feed-content">
            <!-- html content like images and text -->
            </div>
        </div>
    </div>
    <div class="masonry-cell">
        <div class="masonry-item">
            <div class="feed-content">
            <!-- html content like images and text -->
            </div>
        </div>
    </div>
</div>

我试着用CSS来获取元素的左边位置，但没有成功。当使用jquery .position()或offsetLeft()时，也发生了同样的事情。

Answer 1

我在这里尝试了一些东西，找到了一些工作。

// puting all the elements that I'm going to use in a list 
var feeds = document.querySelectorAll('.feed-content');
// since I know that, im a 2 columns grid the first element 
// will alaways be on the right side off the screen I get
// his x position
var dir = feeds[0].getBoundingClientRect().x;

for (var i = 0; i < feeds.length; i++) {
    feeds[i].classList.remove('right');

    if (feeds[i].getBoundingClientRect().x != dir) {
        // adding the cllas if the element doesn't 
        // have that x position
        feeds[i].classList.add('right');
    }
}

一些建议，当我在使用这个问题上的插件时，有时这个函数有一个bug，使得页面上的所有元素都有相同的x值，即使它们显然不一样。即使这部分代码放在布局的脚本函数之后，它也会方式一些干扰。所以简单的延迟函数的执行就解决了这个问题。