gpt4 book ai didi

javascript - 当容器调整大小时使 float div 平滑地移动位置

转载 作者:行者123 更新时间:2023-11-30 10:01:24 25 4
gpt4 key购买 nike

我正在寻找类似 Apple 的 iCloud 网站的东西,当屏幕变得太小时,div 会慢慢移动到新的位置。

我在看这样的东西:

.wrap {
width: 100%;
background-color: green;
clear: all;
}
.wrap div {
float: left;
background-color: red;
height: 100px;
width: 100px;
margin: 10px;
}
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

如您所见,当屏幕变小时 div 会移动,我如何让它们 float 到效果中的新位置?

我会接受:- 纯CSS- Javascript- 查询以及任意组合作为答案。

我想尽可能避免使用插件。

最佳答案

看看http://isotope.metafizzy.co/ .

var iso = new Isotope( '.wrap', {
// options
});
.wrap {
background-color: green;
}
.wrap div {
float: left;
background-color: red;
height: 100px;
width: 100px;
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

关于javascript - 当容器调整大小时使 float div 平滑地移动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31464436/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com