<!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 实现图片瀑布流的更多相关文章

  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. GD32 ------ 使用外部中断，中断函数需要延时才能读到真正电平

    MCU:GD32F103RCT6 中断引脚没有外界上拉电阻 中断配置如下: RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOC|RCC_APB2Periph_AFI ...

  2. 多态（instanceof）

    多态调用的三种格式 * A:多态的定义格式: * 就是父类的引用变量指向子类对象 父类类型 变量名 = new 子类类型(); 变量名.方法名(); * B: 普通类多态定义的格式 父类 变量名 = ...

  3. Zabbix Server 自带模板监控更加灵活MySQL数据库

    Zabbix Server 自带模板监控更加灵活MySQL数据库 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.zabbix-agent端配置 1>.修改zabbix的 ...

  4. log4j、log4j2和slf4j的基本使用

    一.什么是log4j.log4j2和slf4j Log4j是Apache的一个开源项目,通过配置来控制日志的输出.主要是控制日志的输出级别.输出位置和输出内容格式. Log4j2是在log4j框架的基 ...

  5. 面向对象【林老师版】：面向过程vs面向对象（一）

    一.面向过程 1.引子 面向过程:核心是过程二字,过程指的是解决问题的步骤,设计一条流水线,机械式的思维方式优点:复杂的问题流程化,进而简单化缺点:可扩展性差 2.验证代码 import json i ...

  6. [JVM-3]Java垃圾回收(GC)机制和垃圾收集器选择

    哪些内存需要回收? 1.引用计数法 这个算法的实现是,给对象中添加一个引用计数器,每当一个地方引用这个对象时,计数器值+1:当引用失效时,计数器值-1.任何时刻计数值为0的对象就是不可能再被使用的.这 ...

  7. weblogic每天日志合并shell脚本 [个人记录]【转】【补】

    from RogerZhu modified by King sh logback.rb "/data/logs/" "/tmp/domain" "a ...

  8. Leetcode 136 Single Number 仅出现一次的数字

    原题地址https://leetcode.com/problems/single-number/ 题目描述Given an array of integers, every element appea ...

  9. 2018牛客网暑期ACM多校训练营（第一场）J Different Integers（树状数组）

    题意 给出一串数字以及q次查询,每次查询l,r],要求求出[1,l]和[r,n]的所有不相同的数字个数. 分析 先对数组进行倍增,变为两倍长,然后查询就变成一个完整的区间.离线处理,按r从小到大排序, ...

  10. PHP7 学习笔记（十三）composer详解一

    摘要 从拷贝第三方代码到项目中(1994),到PEAR安装依赖包(1999),再到Composer兴起(2012),PHP社区经历了将近20年的探索.PHP这门古老的语言,也在不断的发展更新,在web ...