基于CSS多列实现瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="pbl.css"/>
</head>
<body>
<div class="container">
<div><img src="img/1.jpg"/></div>
<div><img src="img/2.jpg"/></div>
<div><img src="img/3.jpg"/></div>
<div><img src="img/4.jpg"/></div>
.
.
.
</div>
</body>
</html>
css
*{
padding: 0px;
margin: 0px;
}
.container{
width: 1000px;
column-width: 100px;
-webkit-columns-width: 100px;/* safari chrome */
/* -ms- ie */
/* -o opera */
-moz-columns-width: 100px;/* firefox */
column-gap: 5px;
-webkit-column-gap: 5px;
-ms-column-gap: 5px;
-o-column-gap: 5px;
-moz-column-gap: 5px;
margin: 0px auto;
}
.container div{
width: 100px;
border: 1px #000000 solid;
margin-top: 5px;
text-align: center;
word-wrap:break-word;
}
.container img{
width: 100px;
height: auto;
display: block;
}
基于CSS多列实现瀑布流的更多相关文章
- 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- js-实现多列布局(瀑布流)
本文是使用面向对象的思想实现多列布局(瀑布流).当然,使用面向过程也能实现,具体效果图和案例如下: 具体实现代码如下: <!DOCTYPE html> <html lang=&quo ...
- css3多列及瀑布流效果
css3内容分块,多列效果(类似报纸版块排版): .div02{ /*count:内容分为几列,gap:内容与分割线的距离,rule:分割线样式*/ column-count:; column-gap ...
- 纯 css column 布局实现瀑布流效果
原理 CSS property: columns.CSS属性 columns 用来设置元素的列宽和列数. 兼容性 chrome 50+ IE 10+ android browser 2.1+ with ...
- css浮动+应用（瀑布流效果的实现）
首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表
#fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- web前端学习笔记-瀑布流的算法分析与代码实现
瀑布流效果目前应用很广泛,像花瓣,新浪轻博,蘑菇街,美丽说等好多网站都有.也有好多支持该效果的前段框架,今天学习了一下这种效果的实现,不依赖插件,自己动手分析实现过程,为了便于叙述清楚,分析中的一些名 ...
随机推荐
- wechat开发笔记之1.线上环境搭建与测试
Wechat开发笔记 线上环境搭建: 申请一个wechat公众平台. 手机个人微信可以用webwechat来测试. Website:https://web.weixin.qq.com/ 手机客户端扫一 ...
- Azure进阶攻略 | 你的程序也能察言观色？这个真的可以有！
前段时间有个网站曾经火爆微博和朋友圈:颜龄机器人.只要随便上传一张包含人面孔的照片,这个网站就可以分析图片,并判断照片中人物的年龄.化妆.美颜 P 图.帽子墨镜之类的配饰,几乎都没法影响这个网站的检测 ...
- Azure 7 月新公布
Azure 7月新发布:Cosmos DB,事件中心捕捉功能,Hybrid Connections,流量管理器快速故障转移功能. 您现有的 DocumentDB 资源现已作为 Azure 门户上 Az ...
- SAP CRM WebClient UI和Hybris backoffice UI开发的相同点
CRM WebClient和Hybris backoffice的UI开发都不需要开发人员手写原生的html代码. CRM WebClient UI 在CRM WebUI workbench里,开发人员 ...
- Socket的基本使用步骤
Socket的基本使用步骤 一.使用Socket,首先需要导入这几个系统头文件 #import <sys/socket.h> #import <netinet/in.h> #i ...
- 使用extentreports美化报告
无意之间在整理testng 报告输出的文档时,发现一个美化testng的报告的插件,感觉确实“漂亮”,但是还不确定是否实用,案例来自官方网站自己添了一些内容,更改了存放路径,本地目前已确定可正常运行, ...
- POJ-2456 Aggressive cows---最大化最小值（也就是求最大值）
题目链接: https://vjudge.net/problem/POJ-2456 题目大意: 有n个牛栏,选m个放进牛,相当于一条线段上有 n 个点,选取 m 个点, 使得相邻点之间的最小距离值最大 ...
- 【UOJ83】【UR #7】水题出题人（提交答案题）
点此看题面 大致题意: 给你若干份排序的代码,共\(6\)个子任务,每个子任务让你构造数据使得一份代码用时在给定的\(T\)以内,另一份代码用时超过\(2000000\). 子任务\(1\):归并排序 ...
- MySQL 数据库和一些常用命令的使用
常用命令总结: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3 ...
- An error occurred at line: 1 in the generated java file问题处理
tomcat6启动后,加载jsp页面报错,提示无法将jsp编译为class文件,主要报错信息如下: An error occurred at line: 1 in the generated java ...