基于html + css 实现图片瀑布流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
column-width: 192px;/*将图片的宽度设置为多列的宽度*/
-webkit-column-width: 192px;/*浏览器的兼容性*/
-moz-column-width: 192px;/*浏览器的兼容性*/
}
.pic{
width: 192px;
}
.pic img{/*给图片设置阴影 内边距*/
padding: 8px;
box-shadow: 0 0 15px gainsboro;
border-radius:4px;
}
</style>
<script>
window.onload=function(){//当页面加载完成时执行操作
var objBox=document.getElementById("box");//获取一个对象 id
// alert(objBox.innerHTML); //看看对象成功与否
var str="<div class='pic'>";
for(var i=1;i<=164;++i){
if(i<10){
str+="<img src='images/P_00"+i+".jpg' />";
}else if(i<100){
str+="<img src='images/P_0"+i+".jpg' />";
}else{
str+="<img src='images/P_"+i+".jpg' />";
}
}
str+="</div>";
objBox.innerHTML=str;//将对象中的内容修改
}
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
基于html + css 实现图片瀑布流的更多相关文章
- 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- Jquery实现图片瀑布流思路-简单版
目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...
- 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- 利用LruCache载入网络图片实现图片瀑布流效果(改进版)
PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...
- 图片瀑布流，so easy！
什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子: 简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 列的样子很像瀑布,于是就有 ...
- js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
- js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- 基于jQuery 的图片瀑布流实现
解题思路: 第1步 分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. ...
- 用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
随机推荐
- 【矢量绘图工具】Adobe Illustrator (AI) CC 2019 for Mac 23.0
以上图片来源于互联网分享,如涉及版权问题请联系作者删除. 文章素材来源:风云社区(www.scoee.com) 下载地址:风云社区(www.scoee.com) [简介] Adobe illust ...
- 2018年度最优秀mac软件及游戏推荐，个个万里挑一
今天和大家带来2018年度最优秀Mac软件和游戏合集,个个万里挑一,2018年,风云社区(scoee.com)分享了上数千款优秀的Mac软件和游戏,结合用户反馈,精选出各个类别的优秀的Mac软件,推荐 ...
- python自动化开发-[第二十三天]-初识爬虫
今日概要: 1.爬汽车之家的新闻资讯 2.爬github和chouti 3.requests和beautifulsoup 4.轮询和长轮询 5.django request.POST和request. ...
- python机器学习-sklearn挖掘乳腺癌细胞（三）
python机器学习-sklearn挖掘乳腺癌细胞( 博主亲自录制) 网易云观看地址 https://study.163.com/course/introduction.htm?courseId=10 ...
- Django基于正则表达式匹配URL
在Django1.X中,是这样匹配的. 在Django2.X中,是这样匹配的. Django2.X中开始需要用re_path模块进行正则表达式匹配了,太JB坑了,卡了好久这个问题,最后还是问群里面的高 ...
- Part-Nine
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.
- extern "C" 含义
extern "C" 被 extern 限定的函数或变量是 extern 类型的 被 extern "C" 修饰的变量和函数是按照 C 语言方式编译和链接的 e ...
- Spark源码剖析 - SparkContext的初始化(三)_创建并初始化Spark UI
3. 创建并初始化Spark UI 任何系统都需要提供监控功能,用浏览器能访问具有样式及布局并提供丰富监控数据的页面无疑是一种简单.高效的方式.SparkUI就是这样的服务. 在大型分布式系统中,采用 ...
- idea上使用maven模块开发
使用maven模块开发: 使用Maven构建多模块项目 在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最常见的就是分为common(域模型层).dao(数据库访问层).s ...
- C# Math.Round实现中国式四舍五入
decimal sum = 11111.334; sum = , MidpointRounding.AwayFromZero); sum:11111.33decimal sum = 11111.34 ...