花瓣网图片排列是怎么实现

liudong178 2011-11-29 11:54:22

这是网站 www.huaban.com

...全文

669 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

shanyanzhouailili 2012-02-14

打赏
举报

回复

你好，请问采集到花瓣谷歌的扩展你写过吗写过的话麻烦帮我传一份吧谢谢

atmo 2011-11-29

打赏
举报

回复

全是绝对定位的图片加载采用ajax

beyond_me21 2011-11-29

打赏
举报

回复

通过js判断各个图片的高度，再用绝对定位

kkbac 2011-11-29

打赏
举报

回复

其实你看源代码, 或者你熟悉css就知道. 除了一个float:left外,就是一个固定宽度.

一、瀑布流花瓣网图片排列方式（新增的图片要放在最 “矮” 的列里）每次插入图片之前先让每一列根据高度排序优先将图片插入到此时高度最小的那一列以后依次排序实现效果：瀑布流 ajax获取数据、动态创建绑定数据到页面、将高度最小的li排到ul里（sort）、多张图片延迟加载（透明度）、回到顶部、距离底端800时再重新加载图片；二、回到顶部虽然a标签锚点也可以实现但是没有过渡效果（1）获取到back 并且为回到顶部设定一个总时间（无论页面多长都在200

图片瀑布流可以节省图片的排版空间，美观图片的排列，避免图片排列的参差不齐。实现图片瀑布流可以固定宽（花瓣），也可以固定高（百度图片），看个人需求，我的需求是宽固定。如果图片的排列不适用瀑布流的话，排版如下：是不是特别的难以接受，的确，自己都无法接受，更别说展示给他人观看了。如果使用瀑布流，排版如下：那可真是天差地别啊，如此美观的排列，简直让人心情愉悦。图片瀑布流代码： HTML <div class="waterFall-box" ref="box"> <div c

什么是图片瀑布流用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子：简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有致的排列出 n 列的样子很像瀑布，于是就有了瀑布流图片一说。实现原理1、第一种方式第一种方式前提是：图片的宽度固定，但是列可变(根据屏幕大小)通过上面的介绍，我们知道要实现瀑布流的前提是宽度一致(假如为100px)，高度可以不相同。我们首先确定排...

阅读本文大概需要 5.8 分钟。什么是图片瀑布流用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子：简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有...

本文介绍下载python下载网络图片的方法，包括通过图片url直接下载、通过re/beautifulSoup解析html下载以及对动态网页的处理等。通过pic_url单个/批量下载已知图片url，例如http://xyz.com/series-*(1,2..N).jpg，共N张图片，其链接形式较为固定，这样经简单循环，直接通过`f.write(requests.get(url).content)...

62,046

社区成员

669,049

社区内容

发帖

与我相关

我的任务

javascript云原生企业社区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章