基于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,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
随机推荐
- （01背包 dp）P1049 装箱问题 洛谷
题目描述 有一个箱子容量为VV(正整数,0≤V≤20000),同时有nn个物品(0<n≤30,每个物品有一个体积(正整数). 要求nn个物品中,任取若干个装入箱内,使箱子的剩余空间为最小. 输入 ...
- C# Excel转换成Json工具（含源码）
可执行版本下载:https://github.com/neil3d/excel2json/releases 完整项目源代码下载:https://github.com/neil3d/excel2json ...
- qml: 组件复用
在编写组件时,使用下面两种方法可以实现组件的复用: import QtQuick 2.0 import QtQuick.Window 2.2 import QtQuick.Controls 1.4 a ...
- Java基础内部类、包的声名、访问修饰符、代码块整理
内部类 14.1内部类概念 将类写在其他类的内部,可以写在其他类的成员位置和局部位置,这时写在其他类内部的类就称为内部类.其他类也称为外部类. 内部类分为成员内部类与局部内部类. 我们定义内部类时,就 ...
- 《Apache kafka实战》读书笔记-kafka集群监控工具
<Apache kafka实战>读书笔记-kafka集群监控工具 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如官网所述,Kafka使用基于yammer metric ...
- Hudson持续集成管理平台搭建
IP: 10.0.70.106 8G 内存 (Hudson 多 个 工程 在 同 时 构建 的情况下 比 较耗内存) 环 境: CentOS 6.5 . JDK7 注:Hudson 只是一个持续集成 ...
- linux安装Subversion版本控制工具(Subversion + Apache + jsvnadmin)
操作系统:Centos 6.7 集成环境服务器:10.0.210.112 操作用户:root 建议安装前更新操作系统 # yum update 更新完成后重启 # reboot 1: 安装 Apach ...
- Kafka权威指南 读书笔记之（四）Kafka 消费者一一从 Kafka读取数据
KafkaConsumer概念 消费者和消费者群组 Kafka 消费者从属于消费者群组.一个群组里的消费者订阅的是同一个主题,每个消费者接收主题一部分分区的消息. 往群组里增加消费者是横向伸缩消费能力 ...
- Ubuntu 下使用 putty并通过 ch340 usb 串口线进行调试
安装putty sudo apt-get install putty -y 插入usb转串口线 由于linux下没有Windos类似的设备管理器,所以我们可以通过其他方法获取对应的串口号 可以在插拔之 ...
- vue中computed和watch
computed 计算属性 能够监听vue数据上的变化,页面上来就执行一次,每改变一次数据就又触发.在操作数据的时候,会派生出另一个事情 1.函数形式 computed:{ listenArr(){ ...