百度图片排列怎么实现的

mirrorspace 2018-04-13 06:01:20

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

...全文

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

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

mirrorspace 2018-04-14

打赏
举报

回复

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

天际的海浪 2018-04-13

打赏
举报

回复

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

HTML+CSS+JS实现瀑布流布局前言一、总体效果二丶HTML+CSS简单布局三.JS实现后续布局总结前言瀑布流布局简而言之就是类似瀑布流的布局嘛，这么一讲大家可能还是不是很了解明白，来来来，那现在我给大家上一个常见的实例: 相信大家在百度上搜索图片时的时候，网页图片的布局就是这样子的吧，什么？你还是不清楚瀑布流，那咱就再我看一个那没关系，淘宝大家应该再熟悉不过了吧! 我们可以发现图中每个商品框的高度不同的，因此导致我们的商品图片的高度布局都不在一个高度上。在百度搜索图片的时候我们发

今天给大家分享一种通过使用CSS来实现类似百度图片搜索效果的瀑布流布局的方案。代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatib

ZblogPHP度娘主题新增图片列表页面模版 window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getE...

最近使用Vue工程+百度富文本ueditor碰到一个需求需要解决多图上传图片排序的问题参考一篇文章可以完美解决文章连接丢失。。。多图上传写入文本框的图片顺序和上传的顺序不一致修改两个地方第一个ueditor/dialogs/image/image.js 把_this.imageList.push(json);改为_this.imageList[$file.index()]...

本篇内容实现类似百度图片的呈现功能，瀑布流+自动加载 index13.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>uvi</title> 6 <...

87,988

社区成员

224,683

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章