jquery - 有没有办法使用 jQuery 同位素来定位每行中的第一个和最后一个元素？

Question

我有一个砌体同位素网格，它有 n 行，两个列大小：160 像素 x 160 像素和 320 像素 x 320 像素，我想为每行的第一个和最后一个元素分配不同的样式。我的行可能有 4 个元素到 7 个元素。我一直在为此苦苦挣扎，想知道这是否可能。

HTML

<div id="grid" style="position: relative; overflow: hidden; height: 960px;"
class="isotope">
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="two_by_two">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_two">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="two_by_two">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_two">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="two_by_two">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_two">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
    <div class="one_by_one">
        <img class="thumb" src="https://s3.amazonaws.com/stitch-images/products/gucci.png"
        />
    </div>
</div>

CSS

#grid {
    margin:auto;
    margin-top:55px;
    margin-bottom:200px;
    width:1140px
}
#grid .thumb {
    width:97%;
    height:97%
}
#grid .one_by_one {
    width:160px;
    height:160px;
    background:url(https://s3.amazonaws.com/stitch-images/assets/cell_1x1.png);
    cursor:pointer
}
#grid .one_by_two {
    width:160px;
    height:320px;
    background:url(https://s3.amazonaws.com/stitch-images/assets/cell_1x2.png);
    cursor:pointer
}
#grid .two_by_two {
    width:320px;
    height:320px;
    background:url(https://s3.amazonaws.com/stitch-images/assets/cell_2x2.png);
    cursor:pointer
}

JS

$("#grid").isotope masonry: layoutMode: 'fitRows'

查看我的 Jsfiddle http://jsfiddle.net/TDma4/

score 11 · Accepted Answer

这是解决问题的一种方法。

工作解决方案：http: //jsbin.com/ufuleb/21/

CSS

.first, .last {
  border:2px dashed blue;
  opacity:.75;
}

JavaScript

$("#grid").isotope(
    { layoutMode : 'fitRows' });

// Last div element
$("#grid div:last-child").addClass("last");

var maxWidth = 0;

// Use max to handle last div
$("#grid div").each(function (i) {  
  matrix = matrixToArray($(this).css("-transform"));

  // identify first elements
  if ( parseInt(matrix[4],10) == 0 ) {
    $(this).addClass("first");
  }

  // identify last elements
  if ( parseInt(matrix[4],10) > parseInt(maxWidth,10) ) { 
    maxWidth = matrix[4];
  } else {      
    $(this).prev().addClass("last");
    maxWidth = 0;
  } 
});

// Util function for parsing -webkit-transform
function matrixToArray(matrix) {    
    return matrix.substr(7, matrix.length-8).split(', ');
}

遍历每个div并跟踪当前xT值（CSS -webkit-transform）。每当传递最大值时，只需更新前一个值，该值应该是每行的最后一个元素。最后一个元素用:last-child. 请注意，此解决方案还处理整体#grid宽度变化。

示例输出

示例输出

这可能会进一步优化，但至少提供了一个起点。

我从这个答案中得到了一些帮助：https ://stackoverflow.com/a/5968313/1085891

以供参考：

score 7 · Accepted Answer

同位素有一个itemPositionDataEnabled选项可以显示每个元素的位置。使用它和onLayout处理程序，您可以计算每行的第一个和最后一个元素（demo）：

$('#grid').isotope({
    itemPositionDataEnabled: true,
    onLayout: function (elems, instance) {
        var items, rows, numRows, row, prev, i;

        // gather info for each element
        items = elems.map(function () {
            var el = $(this), pos = el.data('isotope-item-position');
            return {
                x: pos.x,
                y: pos.y,
                w: el.width(),
                h: el.height(),
                el: el
            };
        });

        // first pass to find the first and last items of each row
        rows = [];
        i = {};
        items.each(function () {
            var y = this.y, r = i[y];
            if (!r) {
                r = {
                    y: y,
                    first: null,
                    last: null
                };
                rows.push(r);
                i[y] = r;
            }
            if (!r.first || this.x < r.first.x) {
                r.first = this;
            }
            if (!r.last || this.x > r.last.x) {
                r.last = this;
            }
        });
        rows.sort(function (a, b) { return a.y - b.y; });
        numRows = rows.length;

        // compare items for each row against the previous row
        for (prev = rows[0], i = 1; i < numRows; prev = row, i++) {
            row = rows[i];
            if (prev.first.x < row.first.x &&
                    prev.first.y + prev.first.h > row.y) {
                row.first = prev.first;
            }
            if (prev.last.x + prev.last.w > row.last.x + row.last.w &&
                    prev.last.y + prev.last.h > row.y) {
                row.last = prev.last;
            }
        }

        // assign classes to first and last elements
        elems.removeClass('first last');
        $.each(rows, function () {
            this.first.el.addClass('first');
            this.last.el.addClass('last');
        });
    }
});

更新：基于 JSuar 反馈的修正算法

更新 #2：修复了项目高于 2 行时的问题

score 1 · Accepted Answer

Mike，如果您喜欢冒险，可以扩展 Isotop 来执行此操作。我从http://isotope.metafizzy.co/docs/extending-isotope.html中提取了以下内容

您可以在 .each 块中执行您想要执行的任何其他属性

_fitRowsLayout : function( $elems ) {
  var instance = this,
      containerWidth = this.element.width(),
      props = this.fitRows;

  $elems.each( function() {
    var $this = $(this),
        atomW = $this.outerWidth(true),
        atomH = $this.outerHeight(true);

    if ( props.x !== 0 && atomW + props.x > containerWidth ) {
      // if this element cannot fit in the current row
      props.x = 0;
      props.y = props.height;
    } 

    // position the atom
    instance._pushPosition( $this, props.x, props.y );

    props.height = Math.max( props.y + atomH, props.height );
    props.x += atomW;

  });
},

score 1 · Accepted Answer

使用这个：http: //jsfiddle.net/86WVw/1/

编辑：同位素现在使用 translate3d，编辑为同时使用 translate n translate3d http://jsfiddle.net/86WVw/3/

附加CSS：

[style*="translate(0px"], [style*="translate3d(0px"], .border { // .border is class for end of row item, you can change it to whatever you want
    border: 3px dotted #f00;
}

附加js：

gw = $('#grid').width(); // get grid width
w = $('#grid').width(); // to find smallest width, take a big number first
$('#grid>div').each(function(){ // iterate through tiles
    if ($(this).width()<w) // if width smaller then assumed smallest width
        w = $(this).width(); // change smallest width
});

var x;
for (x = w; x < gw; x += w) // iterate translated tiles from smallest width to grid width
{
    var elms = $('[style*="translate3d('+x+'px"], [style*="translate('+x+'px"]');
    $(elms).each(function(){
        if ((x+$(this).width())>(gw-w)) // if tiles left + tile width reach end of grid
        $(this).addClass('border'); // apply class
    });
}

score 0 · Accepted Answer

这个问题比看起来要简单得多。
盒子的大小是一个普通矩阵的倍数。

这是我的方法。

var columnsWidth = 100; // the base matrix width
var columns = 8; // the number of columns available (container.width / columnsWidth)

$.each(box, function() {
    var box = $(this) // the current box
    var boxSize = [2,2] // obtained subdividing size by matrix
    var maximumXChord = (columns - boxSize[0]) * columnsWidth // the maximum X available

    if (box.x == maximumXChord) { // check if the current X Chords is equal to the maximum
        console.log('the box is the last of this row!')
    } else if (box.x == 0) { // check if the the X is 0
        console.log('the box is the first of this row!') 
    }
})

就这样！

jquery - 有没有办法使用 jQuery 同位素来定位每行中的第一个和最后一个元素？

5 回答 5

Related

Reference