a/21855379/1636522

by wared

HTML

<div class="even">6</div>
<div class="odd">5</div>
<div class="even">4</div>
<div class="odd">3</div>
<div class="even">2</div>
<div class="odd">1</div>

CSS

div {
    font: normal 24px Arial;
    float: left;
    width: 100px;
    line-height: 100px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    color: white;
}

.even {
    background: #999;
}

.odd {
    background: #666;
}

JavaScript

var $el, $clone, els = $('div').get();

$(window).resize(defer(function () {
    if ($el = mostLeft(els)) {

        // Checks by cloning the selected element :
        
        $clone = $el.clone().appendTo('body').css(
            'background', 'black'
        );
        $(this).one('resize', function () {
            $clone.remove();
        });

        // Extra checks : 
        //  - Resize the result panel.
        //  - Try different selectors : ".odd", ".even".
    }
})).resize();

function mostLeft(list) {    
    var biggestLeft;
    return function rec(list) {
        var sel, $el, left;
        if (list.length) {
            $el = $(list[0]);
            left = $el.offset().left;
            sel = rec(list.slice(1));
            if (!sel || left > biggestLeft) {
                biggestLeft = left;
                sel = $el;
            } 
            return sel;
        }
    }(list);    
}

function defer(fn) {
    var tid;
	return function () {
		var me = this, args = arguments;
		tid && clearTimeout(tid);
		tid = setTimeout(function () {
			tid = null; fn.apply(me, args);
		}, 250);
	};
}