Question

我有一个缩略图库预览，我正在使用flex-box显示。它工作得很好，我唯一的抱怨是我有时会根据响应布局的当前宽度得到不完整的行。

在我的笔记本电脑显示屏上，我最终得到2行5列，总共10列。在一个较小的显示器上它下降到3列，所以我有一个漂亮的3 x 3拇指网格，第四排留下一个孤独的拇指。

我想省略任何不完整的行。我知道我可以用一些（非常繁琐，我想象）javascript来做，但CSS解决方案会更好。

我是否缺少灵活方法？

Answer 1

首先，感谢@Roberrrt对原始问题的评论。虽然他的解决方案做了所谓的问题，但我决定在CSS中使用大量媒体查询来填充我的代码是（a）首先是烦人的，（b）彻头彻尾的不可维护。实际上，如果我们考虑用户缩放/字体大小更改等，它实际上并不起作用。

所以我已经咬了一口子弹，并接受javascript是正确的解决方案。

也许这会对其他人有用，所以我在这里分享。它非常符合我的需求，但如果需要，其他人应该很容易适应或概括。

var gallery = document.getElementsByClassName('gallery')[0];
var li      = gallery.getElementsByTagName('li');
var liL     = li.length;

// this next count is necessary as my gallery outputs about 20 empty
// <li> elements (with 0 height) to avoid the ugly case involving
// justify:space-between and an incomplete final row.
//
// Although THIS code is here to REMOVE those last items, it's still
// nice to have the empty <li>s for anyone browsing without javascript.
var liFilledL = gallery.querySelectorAll('li>a').length;

var cols = 0;
var leftMax = 0;

// loop through the <li>s checking that they have a height and that
// each one is to the right of the one before.  Thus we count how many
// exist in the top row.
for (var i = 0; i < liL; i++) {
    if (li[i].offsetHeight) {
        if (li[i].offsetLeft < leftMax) {
            break;
        }

        cols++;
        leftMax = li[i].offsetLeft;
    }
}

// given how many filled <li> there are, and how many are in the top
// row, we can calculate the index of the first <li> in the incomplete
// row
var firstToHide = Math.floor(liFilledL / cols) * cols;

// then simply loop through and hide them.
for (var i = firstToHide; i < liL; i++) {
    li[i].style.display = 'none';
}

出于性能原因，我可能只是在页面加载时运行此功能，因为在页面调整大小时重新计算它并不重要。如果需要，将它包装在debounced resize事件处理程序中显然是一种选择。

是否可以根据布局改变显示的弹性项目数量？

1 个答案: