How to use byRow with stacked elements and responsive layouts

[Futurkind]

The _rows function simply tests if the current element has the same top as the previous element, according to DOM order. This causes elements that should be in the same visual group to be in different groups if an item comes between them that has a different offset().top.

In many responsive views, you might have two elements that stack in one breakpoint, but in another breakpoint they are side by side.

Take this example:

<div class="row row-a">
    <div class="item-1 col-md-6 col-lg-12">
        <div class="equal-height">
            STACKED
        </div>
    </div>
    <div class="item-2 col-md-6 col-lg-12">
        <div class="equal-height">
            STACKED
        </div>
    </div>
</div>

<div class="row row-b">
    <div class="item-3 col-lg-6">
        <div class="equal-height">
            NOT-STACKED
        </div>
    </div>
    <div class="item-4 col-lg-6">
        <div class="equal-height">
            NOT-STACKED
        </div>
    </div>
</div>

Assuming the row-a and row-b are right beside one another, and we are viewing from a large viewport: items 1, 3 and 4 are in the same visual row, but the code only treats 3 and 4 as the same group.

However, in the md breakpoint, item 1 and 2 would ideally be the same height when they are beside one another.

[liabru]

This isn't currently supported. Sounds like a good idea though, I'll look into implementing it. In the meantime I guess you'll need to select your elements together in the correct order manually (e.g. [item-1, item-3, item-4, item-2]).

[Futurkind]

So theoretically, would this work in this context?

$.fn.matchHeight._apply([item-1, item-3, item-4, item-2], {byRow:true})

As for the enhancement: In the row array, instead of the default key, what if the key was instead the "value" of the row?

So instead of row[] looking like row[0], row[1], row[2], it looked like row[670], row[700], row[900], where the key is the floored pixel value of the offset?

Would make assigning objects to row groups easier, and you would just need a key array to help with iteration later.

I don't even know if this is possible, I'm a Javascript novice.

[wpexplorer]

Couldn't we make the byRow param accept an element like this:

byRow: '.row-a'

So it looks for the parent row with the classname 'row-a'?

Or maybe better to target it like this:

$( '.row' ).matchHeight( { target : 'equal-height', } );

This way it will loop through the rows and set equal heights for all child elements with the equal-height class. Currently the target param is global.

Could also just add a 'parentRow' param to check for and skip the automatic row selection.