Question

假设我有一系列图像显示在一系列引导行中，每一行都看起来像

<div class="row">
  <div class="col-md-3 col-sm-6">im1</div>
  <div class="col-md-3 col-sm-6">im2</div>
  <div class="col-md-3 col-sm-6">im3</div>
  <div class="col-md-3 col-sm-6">im4</div>
</div>

渲染此行集时，每行的列数取决于浏览器的像素宽度。现在，假设我想为用户提供行号，但我希望行号与用户看到的行相关联，而不是类指定的行。获取和显示这些行号的最简洁方法是什么？

Answer 1

您可以遍历元素并比较页面上的垂直偏移或位置。在下面的示例中，我使用本机JavaScript .offsetTop属性，但有许多方法（本机和使用jQuery）来查找此信息。

`Demo`

var count; 
$(window).on('load, resize', function() {
    var offset, oldcount = count; count = 0;
    $('.row [class^="col"]').each(function(){
        if(offset !== this.offsetTop) ++count, offset = this.offsetTop;
    }); 
    if(count !== oldcount) {
        console.log(count);
        // ... do stuff
    }
});

Answer 2

我使用.each，$（window）.on（＆＃39; load，resize＆＃39;，...）和element.offsetTop跟随Tiny Giant的领导。为了获得一组行号并将它们与列相关联，我创建了一个名为＆＃34; offsets＆＃34;的对象。行位置作为属性。（设置仍然不适用于所有浏览器，所以我用一个对象模仿了一个。）将该对象的键转换为数组给了我一个排序的唯一行偏移列表。然后，我可以使用.indexOf将列偏移转换为每列的行号。

var display_rows = function () {
    var s = '.row [class^="col"]'
    ,   offsets = {};
    $(s).each(function(){
        offsets[this.offsetTop] = 1;
    });
    var offset_keys = Object.keys(offsets);
    $(s).each(function(){
        var row = offset_keys.indexOf(card.offsetTop + '') + 1;
        console.log(row);
        // display row number where you want it.  
        // e.g. $(this).find('.coordinate').html(row)
    });
}
$(window).on('load, resize', function() {
    diplay_rows();
});
$(document).ready(function () {
    display_rows();
});

在bootstrap中显示行号的最简洁方法是什么？

2 个答案:

`Demo`