1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             #box{
  12.                 column-width: 192px;/*将图片的宽度设置为多列的宽度*/
  13.                 -webkit-column-width: 192px;/*浏览器的兼容性*/
  14.                 -moz-column-width: 192px;/*浏览器的兼容性*/
  15.             }
  16.             .pic{
  17.                 width: 192px;
  18.             }
  19.             .pic img{/*给图片设置阴影  内边距*/
  20.                 padding: 8px;
  21.                 box-shadow: 0 0 15px gainsboro;
  22.                 border-radius:4px;
  23.             }
  24.         </style>
  25.         <script>
  26.          window.onload=function(){//当页面加载完成时执行操作
  27.             var objBox=document.getElementById("box");//获取一个对象  id
  28. //            alert(objBox.innerHTML); //看看对象成功与否
  29.             var str="<div class='pic'>";
  30.                 for(var i=1;i<=164;++i){
  31.                     if(i<10){
  32.                         str+="<img src='images/P_00"+i+".jpg' />";
  33.                     }else if(i<100){
  34.                         str+="<img src='images/P_0"+i+".jpg' />";
  35.                     }else{
  36.                         str+="<img src='images/P_"+i+".jpg' />";
  37.                     }
  38.                 }
  39.                 str+="</div>";
  40.                 objBox.innerHTML=str;//将对象中的内容修改
  41.  
  42.         }
  43.         </script>
  44.     </head>
  45. <body>
  46.     <div id="box">
  47.  
  48.     </div>
  49. </body>
  50. </html>

基于html + css 实现图片瀑布流的更多相关文章

  1. 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  2. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  3. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  4. 利用LruCache载入网络图片实现图片瀑布流效果(改进版)

    PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...

  5. 图片瀑布流，so easy！

    什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子: 简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 列的样子很像瀑布,于是就有 ...

  6. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  7. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  8. 基于jQuery 的图片瀑布流实现

    解题思路: 第1步  分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. ...

  9. 用原生JavaScript实现图片瀑布流的浏览效果

    学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...

随机推荐

  1. curl与wget

    curl 和wget 区别 使用方法 可参考 curl vs Wget 1.curl是libcurl这个库支持的,wget是一个纯粹的命令行命令.2.curl支持更多的协议.curl supports ...

  2. apache thrift分析

    thrift是一个用来实现跨语言的远程调用(RPC Remote Procedure Call)的软件框架.根据接口定义语言(IDL Interface definition lanuage) 并借助 ...

  3. 关键字（7）：属性的增删改add，drop，modify

    新建一张表: ));   注意:新建表时,表里面至少要有一个字段   删除整张表: drop table nac_user.a_bt;   增加表的一个属性:  ) default('M') 新增外键 ...

  4. Python编程快速上手-让繁琐工作自动化-第二章习题及其答案

    Python编程快速上手-让繁琐工作自动化-第二章习题及其答案 1.布尔数据类型的两个值是什么?如何拼写? 答:True和False,使用大写的T和大写的F,其他字母是小写. 2.3个布尔操作符是什么 ...

  5. Maven 命令参数 整理

    命令参数 备注 mvn -v --version 显示版本信息; mvn -V --show-version 显示版本信息后继续执行Maven其他目标; mvn -h --help 显示帮助信息; m ...

  6. Django REST Framework extensions

    GitHub:https://github.com/chibisov/drf-extensions 官方文档:http://chibisov.github.io/drf-extensions/docs ...

  7. 集成学习算法汇总----Boosting和Bagging（推荐AAA）

     sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  8. 设计模式---数据结构模式之迭代器模式（Iterate）

    一:概念 迭代模式是行为模式之一,它把对容器中包含的内部对象的访问委让给外部类,使用Iterator(遍历)按顺序进行遍历访问的设计模式. 在应用Iterator模式之前,首先应该明白Iterator ...

  9. WebService概念和使用

    1.WebService到底是什么 一言以蔽之:WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 所谓跨编程语言和跨操作平台,就是说服务端程序采用java编写,客户端程序则可以采用 ...

  10. Memcache在.Net中的使用

    一.Memcache基本概念(socket服务器) 本质:是一个在内存上存储的hash表,key的最大值是255字符,最长过期时间为30天 特点:惰性删除,没有监控数据过期的机制,实现最基本的key- ...