<!doctype html>

 <html>

 <head>

   <meta charset="utf-8">

 </head>

 <style type="text/css">

   #content {

     width: 400px;

   }

   #content,

   #content>.panel,

   #content .column,

   #content .column>li {

     margin: 0px;

     padding: 0px;

   }

   #content>.panel {

     width: 100%;

     background: #eee;

     overflow-y: hidden;

     padding-left: 5px;

     padding-right: 5px;

   }

   #content .column {

     width:190px;

     float: left;

     margin-left: 5px;

     margin-right: 5px;

   }

   #content .column>li {

     width: 100%;

     list-style-type: none;

     border-radius: 5px;

     background: #fff;

     margin-bottom: 10px;

     margin-top: 10px;

     overflow: hidden;

     text-align: center;

   }

   #content .column img {

     border: none;

     vertical-align: middle;

   }

 </style>

 <body>

   <div id="content">

     <div class="panel">

       <ul class="left column">

         <li><img src="timg.jpg" width="100%" height="65px"></li>

         <li><img src="timg.jpg" width="100%" height="250px"></li>

         <li><img src="timg.jpg" width="100%" height="250px"></li>

         <li><img src="timg.jpg" width="100%" height="250px"></li>

         <li><img src="timg.jpg" width="100%" height="250px"></li>

         <li><img src="timg.jpg" width="100%" height="250px"></li>

       </ul>
59
60

       <ul class="right column">

         <li><img src="timg.jpg" width="100%" height="200px"></li>

         <li><img src="timg.jpg" width="100%" height="250px"></li>

         <li><img src="timg.jpg" width="100%" height="250px"></li>

         <li><img src="timg.jpg" width="100%" height="250px"></li>

         <li><img src="timg.jpg" width="100%" height="250px"></li>

       </ul>

     </div>

   </div>

 </body>

 </html>

Grid 实现瀑布流布局的更多相关文章

  1. 基于jquery响应式网站图片无限加载瀑布流布局

    分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览   源码下载 实 ...

  2. JS瀑布流布局

    好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...

  3. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  4. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  5. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  6. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  7. JavaScript——基本的瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  8. flexbox实现不等宽不等高的瀑布流布局

    第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...

  9. 通过Measure & Arrange实现UWP瀑布流布局

    简介 在以XAML为主的控件布局体系中,有用于完成布局的核心步骤,分别是measure和arrange.继承体系中由UIElement类提供Measure和Arrange方法,并由其子类Framewo ...

随机推荐

  1. GDAL——命令使用专题——gdallocationinfo命令

    GDAL——命令使用专题——gdallocationinfo命令  前言 GDAL(Geospatial Data Abstraction Library)是一个在X/MIT许可协议下的开源栅格空间数 ...

  2. 关于在UNIcode环境下得TCHAR转string类型以及string转TCHAR

    using namespace System::Text: String ^TCHARtoStr(TCHAR *temp) //TCHAR转String { array<unsigned cha ...

  3. Flask框架基础--第一篇

    1.flask框架和其他几种框架的优缺点对比 Django : 优点 - 大而全所有组件都是有组织内部开发高度定制化 教科书级别的框架 缺点 - 大到浪费资源,请求的时候需要的资源较高 Flask : ...

  4. HFun.快速开发平台（一）=》简述

    [——使用成熟的技术实现了解的业务,关注面向对象,关注业务领域] 偶然的机会又回到了园子,看到上次的文章已是N年前,洽巧近期正在开发一个小程序,标题定为“快速开发平台”有点夸张,算是给自己定个小目标. ...

  5. [Oracle][DATAGUARD] PHYSICAL STANDBY环境里，11.2.0.4 , 也可以使用Pfile来运行Primary和Standby（虽然很少有人用）

    ####Primary#### [oracle@primary ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on 金 ...

  6. 第1次作业—— 熟悉 MoocTest环境

    2.1 Mooctest 使用心得 Mooctest很方便,可以即时测评自己写的测试代码,获得覆盖率和报告,不需要自己安装配置环境 而且安装配置插件的环境也很简单,可以专注于测试本身 2.2 Juni ...

  7. 2017-10-6模拟赛T1 手工(handicraft.*)

    题目 题解 题意很明显,就不讲了. 我们发现从一个A边形切出一个B边形有几种情况: 1. 得到一个(A-B+2)边形和一个B边形(直线过两顶点): 2. 得到一个(A-B+3)边形和一个B边形(直线过 ...

  8. C++标准库之迭代器

    迭代器大致可分为: 输入迭代器,InputIterator 输出迭代器,OutputIterator 前行迭代器,ForwardIterator 双向迭代器,BidirectinalIterator ...

  9. Qt终结者之QML动画

    前言 使用QML差不多2年了,在使用过程中深深的感受到QML的强大与便捷,让我深陷其中,不能自拔.其中QML相比传统的界面最大的优势就是便捷的动画效果与炫酷的粒子效果,让QML做出来的界面能媲美WPF ...

  10. python2入门（3）

    六.python列表(List) python最常见的序列类型python列表List使用[]表示,元素之间以逗号分隔,元素类型不需要相同 内置操作: list = [1,2,3,'four'] li ...