瀑布流html5,瀑布流水黄果树

为什么我使用jquery瀑布流插件infinitescroll在IE中无法使用

不知道你的插件里面的是否生成了IE不兼容的标签，有很多比较炫的插件都是动态生成HTML5标签

相关问答

Q1: 你最喜欢用哪款前端开发工具？为什么？

前端开发最爽的地方就在于，一个编辑器，一个浏览器就足矣走天下。

编辑器——VSCode

前端开发利器，超级好用的编辑器，对于大前端来说更是不可多得。由微软出品，跨平台支持，颜值高，易上手，丰富的插件支持。下面推荐几个前端常用插件。

调试工具： 前端性能优化工具：

Yellow Lab Tools ：一款Web性能及前端质量测试工具。与其他工具不同的是，它有一些在其他工具上无法看到的独特功能，例如页面加载时 JavaScript 与 DOM 互动和其他程序代码验证问题。

DOM monster ：你只需要添加到你的浏览器书签中,在任何需要调试的页面点击这个书签,它就能够帮助你列出目前页面出现的性能问题。

前端开发是目前一个非常火的行业，就业前景和薪资水平都非常不错，至于开发工具的话，那就非常多了，大部分代码编辑器、IDE环境都支持，下面我简单介绍4个非常不错的前端开发工具，感兴趣的朋友可以尝试一下：

01 代码编辑器

这是目前前端开发一个非常流行的开发工具，在业界非常受欢迎，免费、开源、跨平台，由微软自主研发，可以说是良心产品，常见的智能补全、代码高亮、语法提示等功能这个软件都能很好支持，除此之外，插件扩展非常丰富，可以很好的进行代码编辑和调试，轻巧灵活，运行速度快，对于前端开发来说，是一个非常不错的选择：

这也是一个比较轻巧灵活的代码编辑器，文本编辑功能强大，完美支持3大操作平台，但原则上不免费，和VS Code类似，Sublime Text也支持自动补全、语法提示、代码高亮等常见功能，除此之外，针对前段开发也提供了非常多的插件，不管是编辑还是调试代码来说，都非常方便，对于前端开发来说，也是一个不错的选择：

02 IDE环境

这是一个纯粹的国产Web IDE开发工具，目前在前端开发中也有着较高的使用率，常见的自动补全、代码高亮、语法提示、错误检查等功能这个软件都能很好兼容，除此之外，界面柔绿、清爽护眼，针对Vue专门打造了插件扩展，可以很好的提高开发效率，还支持安卓、iOS打包，对于前端开发来说，也是一个非常不错的工具：

这是一个非常专业的Web IDE开发工具，Jetbrains公司的产品，被誉为“Web前端开发神器”、“最智能的JavaScript IDE”，除了基本的智能补全、代码高亮、语法提示等常见功能，这个软件还支持代码分析与重构、 联想查询、 单元测试等高级功能，因此在开发效率上更高，也更适合大型项目，对于多人协作的前端开发来说，是一个非常不错的选择：

WebStorm

和idea同属于jetbrains公司开发的，它是旗下一款JavaScript开发工具，被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。

早起作为一个插件可以集成与Eclipse中来开发前端，现在已经独立出来，也是我最早接触js所使用的一款开发工具，如果熟悉了Eclipse快捷键的童鞋可以快速上手。

一款代码编辑器，借助丰富的插件资源，可以扩展成强大的前端开发工具，和IDE相比，属于一款轻量级的，启动特别快。

Atom

作为开源老大哥GitHub出的一款代码编辑器，和上面那个比较而言，插件略少，但和GitHub无缝结合，尤其是markdown编写，界面也很漂亮。

TextMate是Mac下的著名的文本编辑器软件，与BBedit一起并称苹果机上的emacs和vim。尤其适合程序员使用，可以定制许多贴心使用的功能。

Emacs即Editor MACroS（宏编辑器），是一种强大的文本编辑器。Emacs使用了Emacs Lisp这种有着极强扩展性的编程语言（它的核心是一个Emacs Lisp解释器），并实现了文本编辑支持等的扩展。

Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8 技术)。

VSC-VSCode

轻量快速，高颜值，社区开源，丰富扩展，微软支持

还有超好用的远程开发(vscode remote)和协作(live share)支持

HTML通常会和JavaScript、CSS同时出现。三者均是前端开发最常用到的。目前最常用到的HTML其实就是HTML5。常用的前端编程软件有HBuilder、Sublime Text等等。

HBuilder是一款免费的国产前端开发工具，编者用的就是HBuilder，对于小白和英语不太好的前端开发者这是一款难得的IDE。对代码自动补全方面简直是强大到没朋友。强力推荐。

Sublime Text是一个轻量级的编辑器，不端支持前端的html，js，css。还支持觉得多数的后端语言，比如C语言、java、python等。sublime text的强大之处是支持各种插件而且快捷键非常好用，可以极大的提高开发效率。缺点是代码提示方面不如Hbuilder。

很高兴能回答你的问题，作为一个后端开发，也曾经开发过前端，也用过很多前端开发工具。

1.sublime text用着确实不错，但是代码开发提示不强，平时用着文本编辑器还是可以的。

2.hbuild+用了一段时间各种不适用，最后就卸载了。

3.vs code用着一段时间写vue，需要安装插件，而且提交代码用感觉不方便，把不想提交的最后提交了，导致代码冲突，也许是因为自己用不熟。

4.webstorm 推荐使用，代码智能提示，而且提交代码方便。

无论是Python、Java、javascript，当我们选择一款开发工具时，很多人都会首先想到jetbrain全家桶，Webstorm、IDEA、Pycharm....不得不说，jetbrain在开发工具方面真的是颇有心得、炉火纯青。

但是，如果做前端开发，我认为除了jetbrain的webstorm，还有很多选择，而其中我最为推荐的当属VS Code，下面就来介绍一下。

VS Code

微软在开发工具领域已经有了多年积淀，而VS Code有时微软结合了visual studio和其他开发工具，不断改进、优化推出的一款免费开发工具。

可以说VS Code是当下最为热门的开发工具之一，对比于eclipse、IDEA这些老牌开发工具，微软对于VS Code的改变更为大胆创新，已经处于领头羊的地位。每年微软开发者大会，都会对 VS Code进行大幅度的创新，经过多年的优化，VS Code已经让很多开发者爱不释手。

首先说一下它几个为人熟知的优点，

首先说一下轻量化，我觉得仅凭这一点，就足以让jetbrain全家桶汗颜。无论是webstorm、还是IDEA，最令人痛苦的就是打开过程，臃肿、漫长，加载工程项目和配置项需要多大几分钟，令人无法忍受。而VS Code则不同，它更像一个编辑器，能够秒级打开，速度堪比UE、notepad++这些文本编辑器。

其次说一下丰富插件，丰富的插件造就了VS Code完整的生态，“你想要的，这里都有”，无论是标签样式还是DEBUG或者功能增强，VS Code都有非常多热门的插件，使得你的开发效率大大提升，当然，前端需要的那些优质插件这里都有。

其实，让我转向VS Code并非上述这两点，而是 远程开发 。

我觉得这是微软大胆创新和引领者角色必然的产物，让很多其他开发工具很难望其项背。

有了VS Code远程开发功能，我们可以实时同步本地和服务器代码，不需要再去复杂的配置远程服务器，对于项目管理也非常方便。

WebStorm和PS

尤其PS，平时生活中也需要用到，挺方便的

喜欢用webstorm，atom和vs code，sublimetext都装了，几乎只用webstorm，atom界面是漂亮，也是我第一个下载安装的，装了各种插件，那时初学，感觉提示不全，还有就是插件安装了几个后开机明显变好慢，无奈下了webstorm，感觉很爽

Google PageSpeed Insights 可以为网站生成性能报告，它在移动设备和桌面设备上都是免费的。并且还给出了影响页面加载速度的原因，并为这些问题提供了解决方案。网站速度按照 100 分进行划分，其中：

2. Pingdom Website Speed Test

Pingdom Website Speed Test 可以全面分析影响页面Web速度的因素。此外，还可以查看网站在亚洲、欧洲等多个不同的地理位置的性能信息。

3. WebPagetest

WebPagetest是 AOL 开发的一款在线的免费性能评测网站，从全球多个地点运行免费网站速度测试。可以运行简单的测试或执行高级测试，包括多步骤事务、视频捕获、内容阻塞等等。还将依据测试结果提供丰富的诊断信息，包括资源加载瀑布图，页面速度优化检查和改进建议，会给每一项内容一个最终的评级。

4. GTmetrix

GTmetrix 是一个类似于 pingdom 的工具，可以快速轻松地测试网站速度。它主要有PageSpeed和YSlow两部分组成，并提供相应的得分数据，能够真实的反应出网站的性能，并且会提供可行性建议来帮助改善网站性能。

5. Keycdn Tool

Keycdn Tool 是一个在全球 10 不同地点的网站速度测试工具。它允许测试任何页面的性能。返回的结果将提供请求、内容大小和加载时间等详细信息。此外，还有一个完整的瀑布图，详细说明了每个资源的加载时间和 HTTP 头。

6. GiftOfSpeed

GiftofSpeed是一款免费网站载入速度测试工具，可以在上面获得网站综合性能信息，它能够展示网站加载时间以及评估网站有哪些需要改进的地方，并给予一个客观的综合评分。

GiftofSpeed 的测试结果以瀑布流展示，可以很容易看到网站加载速度，每一项资源的的载入顺序、大小与响应时间的长短，方便了解网站的各项载入资源。此外，它还提供了载入时间最长的内部文件以及外部文件，从而分析出是由哪些因素影响了你网站的载入速度，就可以专门针对这些载入时间较长的元素进行优化，从而最大限度提升网站载入速度。

7. Pagelocity

Pagelocity 是一个网站分析性能测试工具。这个工具也提供了追踪竞争对手的能力。代码检视图在类似工具中是独一无二的。如果想知道 TTFB 和图形化 DOM 元素等，都能通过这项工具获取到。

8. Sucuri Loadtime Tester

Sucuri Load Time Tester 是一个网站分析性能测试工具，它用不同的颜色表示网速快慢，可以很直观地看出测试网站在不同国家的运行速度。绿色表示畅通，没有颜色的普通数字表示一般，黄色表示中等偏慢，红色表示缓慢。

9. GEEKFLARE

GEEKFLARE 这是一套免费的性能测试工具，用于测试网站的 DNS、安全性、性能、网络和 SEO 等问题。

10. Dareboost

DareBoost 是一个免费网站速度测试和网站分析工具。它提供超过 100 种不同的检查项目用以分析你的网站的速度。可以测试桌面端与行动页面、Firefox 与 Chrome 和五个节点的速度差异。

Q2: 想建一个心愿墙网站，瀑布流，php

html5响应式瀑布流网站与php无关，不知道是否有这样的建站工具，不支持html5响应式瀑布流也无所谓，数据出来，自己将html5响应式瀑布流的css及js加上就行了。

【软件668】-专注软件定制服务。

Q3: 如何去设计一个自适应的网页设计或html5

如今移动互联网随着3G的普及，越来越火爆，更多需求跟随而来！APP应用市场和APP应用数量成倍成倍的增长！从而给移动互联网带来新的挑战！

移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

一、了解什么是”自适应网页设计”

自从2010年，Ethan Marcotte提出了 “自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个 范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。

如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。

如果屏幕宽度在400像素以下，则6张图片分成三行。

mediaqueri.es上面有更多这样的例子。

这里还有一个 测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。

二、需要允许网页宽度自动调整

“自适应网页设计”到底是怎么做到的？其实并不难。

首先，在网页代码的头部，加入一行 viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。

三、在进行设计的时候不能使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

四、相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {

font: normal 100% Helvetica, Arial, sans-serif;

}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {

font-size: 1.5em;

}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small {

font-size: 0.875em;

}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

五、流动布局（fluid grid）或瀑布流

“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {

float: right;

width: 70%;

}

.leftBar {

float: left;

width: 25%;

}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

六、选择性加载CSS

“自适应网页设计”的核心，就是CSS3引入的 Media Query模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

@import url(“tinyScreen.css”) screen and (max-device-width: 400px);

七、CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

@media screen and (max-device-width: 400px) {

.column {

float: none;

width:auto;

}

#sidebar {

display:none;

}

}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

八、图片的自适应（fluid image）

除了布局和文本，”自适应网页设计”还必须实现图片的 自动缩放。

这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的 专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的 imgSizer.js。

addLoadEvent(function() {

var imgs = document.getElementByIdx_x(“content”).getElementsByTagName_r(“img”);

imgSizer.collate(imgs);

});

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有 很多方法可以做到这一条，服务器端和客户端都可以实现。

只要遵循这8条设计准则，我相信你们可以很快的设计出自适应的网页出来

Q4: css3能实现横向瀑布流布局吗

H5edu教育Html5开发为您解答：

1、传统的多列浮动

实现方式

· 各列固定宽度，并且左浮动；

· 一列中的数据块为一组，列中的每块依次排列；

· 更多数据加载时，需要分别插入到不同的列中；

优点：

· 布局简单；

· 不用明确数据块的高度，自适应即可。

缺点：

· 列数固定，嵌套较多

· 滚动加载更多数据时，需要指定插入到第几列中，不方便。

2、CSS3样式定义法

我们将要用到的是CSS3新加的column属性，通过指定容器的列个数column-count，列间距column-gap，列中间的边框(间隔边线)column-rule，列宽度column-width实现。

优点：

· 直接用CSS定义，方便快捷，是最好不过了；

· 扩展方便。

缺点：

· 目前仍有部分浏览器不支持CSS3；

· CSS3这种方式的数据排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列；

3、绝对定位

可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；

缺点:

需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；

JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。

Q5: 用HTML5+CSS3怎么实现以下这个页面，求解答或者给个DEMO。http://v.miaov.com/special/css2015/

这个不是瀑布流，这个叫视觉差效果，这个基本上都是js实现的，当然如果不考虑兼容性的情况下用js+css3也是可以的，但是肯定会用到js。你直接百度“视觉差效果”就有了。当然效果不可能一模一样，但是效果都是这样的。