瀑布流布局浅析
作者：乔花 发布时间：2011-09-16 20:18:09
标签：布局,瀑布流,淘宝
简介
如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？
类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。
这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。
几种实现方式
随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求。所以，我们整理了下这种布局的几种实现方式，有三种:
1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式，如下图所示:
各列固定宽度，并且左浮动；
一列中的数据块为一组，列中的每个数据块依次排列即可；
更多数据加载时，需要分别插入到不同的列上；
线上例子。
优点:
布局简单，应该说没啥特别的难点；
不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。
缺点:
列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
滚动加载更多数据时，还要指定插入到第几列中，还是不方便。
0
投稿猜你喜欢
- extend()方法追加序列内容到列表。语法以下是extend()方法的语法：list.extend(seq)参数 &
- 在Oracle 8i版本之前，使用internal用户来执行数据库的启动和关闭以及create database等操作；从8i版本以后，Or
- 最简单的：<textarea name="A" cols="45" rows="2&
- 拆包是指将一个结构中的数据拆分为多个单独变量中。以元组为例：>>> a = ('windows', 10,
前言本文主要任务是使用通过 tf.keras.Sequential 搭建的模型进行各种花朵图像的分类，主要涉及到的内容有三个部分：使用 tf- 在开发国际化网站的时候，难免会与时区打交道，通用CMS更是如此，毕竟其 * 户可能是来自于全球各地的。Django在时区这个问题上下了不少功
- python读取txt文件#方式一：file = r'D:\test.txt'with open(file, 'rb
- 本文实例讲述了Python验证码识别的方法。分享给大家供大家参考。具体实现方法如下：#encoding=utf-8import Image,
- 本文实例总结了Python中numpy模块常见用法。分享给大家供大家参考，具体如下：import numpy as nparr = np.a
- 废话不多说了，直接给大家贴代码了，具体代码如下所示：<!DOCTYPE html><html lang="en&
- 一、下载MySql，安装MySql官网下载MySql数据库官网下载链接地址：https://dev.mysql.com/downloads/
- 今天大概弄懂了partition by和group by的区别联系。1. group by是分组函数，partition by是分析函数（然
- ASP中RegExp是什么 '名字字符检验Public Function CheckName(Str) &nbs
- MySQL多表查询添加练习表-- 用户表（user）CREATE TABLE `user`(`id` INT AUTO_INCREMENT
- Q. How can I restrict access to my SQL Server so that it only allows c
- 前言文件和目录操作是很常见的功能，这里做个简单的总结，包括注意事项和实际的实现代码，基本日常开发都够用了目录操作判断目录或是文件是否存在os
- 1、启动SQL Server Management Studio，以Windows身份验证方式登录。2、在对象资源管理器窗口中，右键单击服务
- 参考资料：正则表达式语法–菜鸟教程Java正则表达式实现简单批量替换举例：将and 批量替换为&&Python实现impor
- 1、实例方法/对象方法实例方法或者叫对象方法，指的是我们在类中定义的普通方法。只有实例化对象之后才可以使用的方法，该方法的第一个形参接收的一
- 前言本文主要给大家介绍的是关于PHP/ThinkPHP实现批量打包下载文件的相关内容，分享出来供大家参考学习，话不多说了，来一起看看详细的介
