百度图片排列怎么实现的

mirrorspace 2018-04-13 06:01:20

如图
百度图片这种固定高度的图片排列,同一行无论几个,总是能排满一行,而不会留空.这个是怎么实现的?

...全文

1150 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

mirrorspace 2018-04-14

打赏
举报

回复

如果要这么做的话,是需要将图片长宽信息保留到数据库了.然后JS请求时,还要带上容器的宽度,服务器再计算宽度找到合适的图片返回. \ 这..很是复杂呢

天际的海浪 2018-04-13

打赏
举报

回复

它的数据库中记录了所有图片的尺寸，从这些图片（上万张）中选出几张宽度加起来正好等于总宽度的图片很简单啊，即使和总宽度差一点，也可以微微调整下图片的显示比例你也看不出来。

很久以前遇到过这样的一个面试题，要求手写代码，实现百度图片的排列预览，并且可以左右点击查看下一张照片，当时没有做出来，这个问题也就一直放在了脑后，工作之后，遇到这样的需求之后，第一反应想到的是在源码网站里面找一个插件，方便省事，不在像从前那般手敲代码，一敲就是一整天的感觉。正好前几天在群里解答一个人的问题，遇到了类似的插件，于是稍微总结了一下，对比了6款 jQuery Lightbo...

插件描述：flexImages是一款轻量级的jquery插件，它可轻松的创出类似谷歌图片流效果。当然，flexImages可以实现多种模式的排列，排列的对象不限于图片，可以是文本，视频等，排列中也可以显示标题，标题可以显示在图片上，也可以显示在图片下方。更多的详情可参考实例。更新时间：2019-07-2911:05:35更新说明：修改演示图片路径。flexImages插件功能通过CSS控制平等的...

3 解决方法（具体下面会有图示） ①确定一个变量。由于当前的浏览器宽度是固定的，因此可以根据浏览器宽度范围制定一个标准高度，类似CSS的媒体查询(media query)； ②初次变换。所有图片宽度根据这个标准高度作宽度的等比例缩放； ③创造容器。每行建立一个div，并装入尽可能多的图片，直到容器装不下； ④第一步调整。每行根据自己与目标宽度（当前浏览器宽度）的差值，再等比

更新记录1.0.0(2021-02-07)首次提交组件平台兼容性app微信小程序支付宝小程序百度小程序字节小程序QQ小程序快应用2.9.7√×××××h5-SafariAndroid Browser微信浏览器(Android)QQ浏览器(Android)ChromeIEEdgeFirefoxpc-Safari√√√√√√√√√实现朋友圈图片自适应排列说明本组件通常用于需要处理朋友圈或者类似qq空间...

微信小程序横向瀑布流式设计初衷因为设计时小程序主要是分享自己摄影作品等图片，需要制作个照片墙来显示作品图片，想法是类似百度图片等横向的瀑布流布局，但是寻找半天资料并没有发现小程序的横向瀑布流布局没有办法只能参考设计思路与布局来自己实现一个这个布局可以叫做横向瀑布流式布局或等高瀑布流式布局简单来说就是根据屏幕的宽度和图片的宽高比计算每行能排下多少张图片，同时高度控制在一定范围内如果下一个图片在这一行排不下，就放到下一行，并且把这个一行已经排列的图片重新按照比例缩放，拉伸到屏幕宽度。

87,997

社区成员

224,709

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章