基于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,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
随机推荐
- 字节输入流 FileInputStream
字节输入流 InputStream : 方法介绍: read(); 读取下一个字节 返回-1读取文件结束 close(); 复制文件 将数据aaa.txt复制到d盘 字节输入流读---->字节输 ...
- Collection中的迭代器
迭代器:boolean hasNext() 判断集合中是否还有没有被取出数据nexe() 取出集合中下一个元素package cn.lijun.demo4; import java.util.Arra ...
- opencv: 基本知识(二）；
1.cvArr* 与 cv::Mat之间的转换; cv::Mat ---- > cvArr* cv::Mat img; IplImage temp = IplImage(img); cvArr ...
- python自动化开发-[第二十五天]-scrapy进阶与flask使用
今日内容概要 1.cookie操作 2.pipeline 3.中间件 4.扩展 5.自定义命令 6.scrapy-redis 7.flask使用 - 路由系统 - 视图 - 模版 - message( ...
- MySQL双主+keeplived安装部署说明
MySQL双主+keeplived安装部署说明 一.环境介绍 1.1.规划 序号 类别 版本 主机名 IP 端口 备注 1 OS CentOS release 6.9 (Final) (minimal ...
- springboot启动报错Failed to configure a DataSource
2018-11-21 19:43:12.076 WARN 5392 --- [ main] ConfigServletWebServerApplicationContext : Exception e ...
- kaggle竞赛入门整理
1.Bike Sharing Demand kaggle: https://www.kaggle.com/c/bike-sharing-demand 目的:根据日期.时间.天气.温度等特征,预测自行车 ...
- Java插件之Jrebel
Jrebel是干嘛的?当你在Java Web的项目中修改一些代码的时候(成员代码),想要生效必须重启服务器.但是每次修改代码都得重启服务器?重启着时间很长的,太麻烦了. Jrebel隆重出场,它可以使 ...
- HDU 1263(水果统计 **)
题意是对水果的产地和种类进行统计再按格式输出. 代码如下: #include <bits/stdc++.h> using namespace std; struct node { ],pl ...
- 自学python 8.
1.有如下文件,a1.txt,里面的内容为:LNH是最好的培训机构,全心全意为学生服务,只为学生未来,不为牟利.我说的都是真的.哈哈分别完成以下的功能:a,将原文件全部读出来并打印.b,在原文件后面追 ...