css3 实现瀑布流
掌握点:
1、column-count 把div中的文本分为多少列
2、column-width 规定列宽
3、column-gap 规定列间隙
4、break-inside: avoid; 避免元素内部断行并产生新列
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
/*container 分为两列 间距20px,item元素宽度 344px*/
.container{
}
/**/
.item{
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
float:left;
margin-bottom:30px;
}
<div class="container">
<div class="item"></div>
</div>
tip:如果设置元素之间的margin-bottom值就需要设置元素浮动,不然会出现两列元素顶部对不齐的问题
css3 实现瀑布流的更多相关文章
- jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...
- CSS3的学习--实现瀑布流
基于CSS3实现瀑布流,使用CSS3的CSS 多栏(Multi-column). 可以到github上下载源码 : https://github.com/CraryPrimitiveMan/water ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 瀑布流的三种实现方式(原生js+jquery+css3)
前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...
- css3多列及瀑布流效果
css3内容分块,多列效果(类似报纸版块排版): .div02{ /*count:内容分为几列,gap:内容与分割线的距离,rule:分割线样式*/ column-count:; column-gap ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- CSS3里的瀑布流效果
页面伸缩之后,内部的布局会自动缩放,高度不同的内容也会自动以垂直瀑布的效果平铺. 下面就是一部分代码: CSS: /*大层*/ .container{width:%;margin: auto;} /* ...
- 用CSS3实现瀑布流布局
以前使用瀑布流都要用js,现在有了css3,可以轻松实现了. 掌握点: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定 ...
- 炫酷的jquery瀑布流
最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...
随机推荐
- C结构体之位域(位段)(转)
有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态, 用一位二进位即可.为了节省存储空间,并使处理简便,C语言又提供了一种数据结构 ...
- 什么是猴子补丁(monkey patch)
monkey patch指的是在执行时动态替换,通常是在startup的时候. 用过gevent就会知道,会在最开头的地方gevent.monkey.patch_all();把标准库中的thread/ ...
- flex 节点删除
<mx:Script> <![CDATA[ protected function btn1_clickHandler(evt:MouseEvent ...
- SQL获取年月日方法
方法一:利用DATENAME 在SQL数据库中,DATENAME(datetype,date)函数的作用是从日期中提取指定部分数据,其返回类型是nvarchar.datetype类型见附表1. SEL ...
- alexNet--deep learning--alexNet的11行代码
% Copyright 2016 The MathWorks, Inc. clear camera = webcam( 2 ); % Connect to the camerannet = ale ...
- 调试LD_PRELOAD注入的代码
LD_PRELOAD提供了平民化的注入方式固然方便,同一时候也有不便:注入库出错后调试比較困难. 我琢磨了几天找到了可行的调试方法,当然未必是最有效的办法.抛出陋文,希望引来美玉~ 首先.写一段代码作 ...
- Appium python自动化测试系列之Capability介绍(五)
5.1 Capability介绍 5.1.1 什么是Capability 在讲capability之前大家是否还记得在讲log时给大家看过的启动时的日志?在我们的整个启动日志中会出现一些配置信息,其 ...
- php 静态成员(static)抽象类(abstract)和接口(interface)
首先看一下静态成员(static)和普通成员(public; protect; private)的区别: 静态成员是属于类的,普通成员是属于对象的: 例如: <?php header(" ...
- EasyDarwin开源音频解码项目EasyAudioDecoder:EasyPlayer Android音频解码库(第二部分,封装解码器接口)
上一节我们讲了如何基于ffmpeg-Android工程编译安卓上的支持音频的ffmpeg静态库:http://blog.csdn.net/xiejiashu/article/details/52524 ...
- Scrapyd部署
从github(https://github.com/scrapy/scrapyd)下载安装包放到D:\python\Lib\site-packages\ 解压压缩包:cd 到解压目录 python ...