基于jquery的不规则DIV(或li)的重新排列难题

iou3344 2016-02-27 02:19:24

脑海里一直有这个想法，但是总也找不到相关的讨论。就是一堆DIV或LI，每一个的宽度不一样，也就是不能按照瀑布流的思路去排列（私认为瀑布流其实是按照源代码顺序排列的，不存在重构DOM。），如果想重排，其实就是以下思路：首先得到容器的宽度，然后得到每一个块元素（DIV或LI）的宽度，然后开始逐一排列，如果一行之内能放的下就放在这里，如果放不下了，在队列中找到能放得下的其他块元素放置到这里（并计算出绝对定位），尽量让一行可以沾满，如果实在找不到，则换行排列下一行。

今天手欠，居然翻到这样一个demo，可是为什么我打开demo一点效果都么有呢？？？是人品问题吗？？？看他介绍和我想要的效果是一模一样的，其他相关的教程就找不到了。。。。。

http://www.jb51.net/article/30115.htm

1、谁可以按照他教程中所描述的效果那样，让这个demo复活呢，因为我想看看他是不是实现了，以及实现的效果到底是怎么样的！
2、如果不是div而是li，谁可以帮我调试一下我的页面，实现我这梦寐以求的效果！！！

100分送上，不给我再加分！！

...全文

380 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

iou3344 2016-02-28

打赏
举报

@sp1234 谢谢已经关注微信号了，可以告诉我你的微信吗？希望给我开放一下你的代码可以吗？因为，我发现加载速度方面实在是听好了，可惜的就是手机最右侧会站不满那么可以想两端对齐一样，给每个div加一个margin，以便让图片沾满浏览器，可以吗？同时请分享一下你做好的代码好吗》

以专业开发人员为伍 2016-02-28

打赏
举报

引用 6 楼 iou3344 的回复:

版主在么？营养~ [quote=引用 5 楼 hch126163 的回复:] http://demo.jb51.net/js/2012/sortRect/ firefox 测试也OK

我在本机的确访问不了其他站都很好换了一台机子也挺好，真实晕了。。我的机子是咋了呢？[/quote] 试试用手机看我的页面。

以专业开发人员为伍 2016-02-28

打赏
举报

引用楼主 iou3344 的回复:

脑海里一直有这个想法，但是总也找不到相关的讨论。就是一堆DIV或LI，每一个的宽度不一样，也就是不能按照瀑布流的思路去排列（私认为瀑布流其实是按照源代码顺序排列的，不存在重构DOM。），如果想重排，其实就是以下思路：首先得到容器的宽度，然后得到每一个块元素（DIV或LI）的宽度，然后开始逐一排列，如果一行之内能放的下就放在这里，如果放不下了，在队列中找到能放得下的其他块元素放置到这里（并计算出绝对定位），尽量让一行可以沾满，如果实在找不到，则换行排列下一行。

非常简单，这个完全用不着写什么博客来攫取分数。比如说两个div，你如何判断其是否相交呢？只要判断 left1<=right2 && right1>=left2 && top1<=bottom2 && bottom1>=top2 这就能判断出两个div相交。剩下的过程就非常简单了。比如说（用一个本办法）以 top=0 这一行，尝试y=0、y=50、y=100 等等，看看你的要放入的 DIV 是否与已经放入的DIV相交。如果不相交则你就找到了放入的位置。如果 top=0 的所有位置都不能放，那么就看 top=50 的第二行.....如果第二行也不能放，那么就看 top=100 的第三行...... 我写了一个简单的测试。你可以用手机微信关注“先达信通北京”，然后输入“扁平布局”四个字，就能看到输出效果。这可以证明在手机浏览器上很不慢。而这个算法，也就30行 js 代码而已。你贴出的那个链接里边，代码太繁琐、复杂了，我根本没有心情看那么繁琐冗余的代码。