javascript - 随着窗口大小的减小，如何使用 jQuery 在查看更多按钮下 overflow hidden 的子元素？

Question

我连续放置了 16 个图标。但是当我减小窗口大小时，溢出的图标会折叠到下一行。

现在是这样的。[

这就是我想要的样子。[

应该 overflow hidden 的图标并显示一个查看所有按钮。单击按钮时，会弹出一个模式框。

我不知道从哪里开始。对于给定的窗口大小，有没有办法在 jQuery 中获取 div 的溢出子标记。

一些提示或想法将不胜感激。谢谢。

Answer 1

鉴于我们可以使用 jQuery:

我们需要计算一些东西，我们在页面加载和调整大小事件时执行初始函数。

首先，我们检查容器的宽度和元素的数量，我将每个元素占用的像素数量 (70) 乘以元素的总数来计算它们将占用的空间。如果元素太多(container <= items) ，我们取消隐藏查看更多，并隐藏所有元素。然后我们计算还剩多少空间(parseInt())减1，查看更多item)

之后，我们使用 .each()函数取消隐藏所有适合的元素，我们停在我们在 space 中计算的索引处多变的。 else 语句取消所有隐藏，这意味着有足够的空间容纳所有元素。

function checkOverflow() {

	var containerWidth = $('.container').width()
	var itemLength = 70 * $('.item').length
	
	if(containerWidth <= itemLength) {
		$('.view-more').removeClass('hidden');
		$('.item').addClass('hidden');
		
		var space = parseInt(containerWidth / 70) - 1;
		
		$('.item').each(function(i, el) {

			if(i < space) {
				$(el).removeClass('hidden');
			}
		}) 
		
	}
	else {
		$('.view-more').addClass('hidden');
		$('.item').removeClass('hidden');
	}
}

checkOverflow();

$('.popup').hide().click(function() {
	$('.popup').hide();
})

$('.view-more').click(function() {
	$('.popup').show();
})

$(window).resize(function() {
	checkOverflow()
})

.container {
	display: inline-block;
	background-color: #0FF;
	width: 100%;
}

.popup {
	position: absolute;
	background-color: #00F;
	top: 20%;
	left: 5%;
	right: 5%;
	width: 90%;
	margin: auto;
	height: auto;
}

.item, .popup-item {
	float: left;
	width: 50px;
	height: 50px;
	background-color: #F00;
	margin: 10px;
}

.view-more {
	float: left;
	width: 50px;
	height: 50px;
	background-color: #F00;
	margin: 10px;
}

.hidden {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="view-more hidden">view more!</div>
</div>

<div class="popup">
	<div class="popup-item"></div>
	<div class="popup-item"></div>
	<div class="popup-item"></div>
	<div class="popup-item"></div>
	<div class="popup-item"></div>
	<div class="popup-item"></div>
	<div class="popup-item"></div>
	<div class="popup-item"></div>
	<div class="popup-item"></div>
</div>