Question

我在网页上使用的是砖石结构，因此我需要对显示在屏幕右侧的每个元素进行样式设置，使其与其他元素不同。这是我用于masonry的参考。首先，我需要右侧元素向右浮动并具有不同的边距设置，并且由于我的项目中的高度变化很大，所以有时向左或向右点移动的元素并非每次都以相同的方式交替。我正在使用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');
    }
}

一些建议，当我使用这个问题上使用的插件时，有时此函数存在一个错误，该错误使页面上的所有元素都具有相同的x值，即使它们显然不同。即使这部分代码放在布局的脚本功能之后，也会有一些干扰。因此，只需延迟函数执行即可解决问题。

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

1 个答案: