我正在寻找一些东西,我不知道它叫什么,或者我在哪里可以找到神秘信息。
http://ricklancee.com/jquery-layout
^ 所以我现在得到的是一个带有100%宽度(当前浏览器宽度)的包装器的网站,在此我已经放置了一些固定的(240px)和float:left; 当我让窗户变小时,他们会将自己定位在彼此之下。
当他们漂浮在彼此之下时,我希望他们做什么 - 然后回来 - 对那个位置起作用。
http://masonry.desandro.com/显示了一个示例,当您调整窗口大小时,元素将浮动/动画到新位置。
有谁能告诉我这是怎么做的,这种技术叫做什么或者我在哪里可以找到这样做?
我不使用插件,只是为了教育目的自己编写脚本。
非常感谢,
答案 0 :(得分:0)
使用浮动浏览器可以处理这类事情。
如果你想自己做,那就会变得复杂。
你需要绝对定位div。 position: absolute;
- 并确保父div具有position: relative;
然后添加一个监听器来监视resize事件,并在调用resize事件时计算div的新位置。
请参阅:http://api.jquery.com/resize/
实际上,将它们设置为新家的动画很简单 - 只需$(....).animate({top: xx, left: xx})
。困难的部分将计算它们应该去的地方。
当然可行。
使用.one()
绑定resize事件时,只需调用一次。然后,当您被呼叫时,添加setTimeout()
以将实际计算延迟1/2秒。然后计算位置并为其设置动画。
仅在动画完成后,再次绑定事件。您不希望在此之前绑定,或者您将同时运行多个动画。 (确保仅在其中一个动画中绑定,而不是所有动画都绑定,因为您将有多个动画的div。)