【JS瀑布流布局模式(2)】的更多相关文章

JS瀑布流布局模式(1)

在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容较多且不固定时,就依赖于html结构的顺序,非常受限制.这里给了一个简单的例子,只要传入列表的数量和宽度,就可以动态的将数据放到对应的列里. 原理 1.定义两个容器,一个是存放内容,一个是要展示的列表. 2.将每列的offsetHeight存入一个数组里,比较得出最小的那一列,然后把数据放到最小的列…

JS瀑布流布局模式(2)

这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效,各个列的图高度差异不大.这个例子不需要在window.onload之后执行,直接计算每列的索引,按照顺序一列一列的放置,在图大小不同的时候列的高度可能会有很大的差距.用下面的图做说明. 说明: 上一个案例如下图: 源代码: <!DOCTYPE html> <html> <head> <met…

JS 瀑布流布局

瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>瀑布流布局</title> <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></scrip…

JS瀑布流布局

好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的最少值和索引 4.设置第二行的第一个元素的TOP值为数组中的最小值,同时设置它的LEFT值为第一行索引元素的LEFT值 5.将数组为索引值的元素设置为(第四条中的top值加它的高度) 效果如下图: 代码如下: <!DOCTYPE html> <html> <head lang=&…

JS案例之6——瀑布流布局(1)

在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容较多且不固定时,就依赖于html结构的顺序,非常受限制.这里给了一个简单的例子,只要传入列表的数量和宽度,就可以动态的将数据放到对应的列里. 原理 1.定义两个容器,一个是存放内容,一个是要展示的列表. 2.将每列的offsetHeight存入一个数组里,比较得出最小的那一列,然后把数据放到最小的列…

纯js实现瀑布流布局及ajax动态新增数据

本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: ? 1 2 3 4 5 6 7 8 9 10 1…

js网页瀑布流布局

瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个box(即有多少列) 3.声明一个空数组(用于放置每列的高度) 4.for(var i=0;i<box.length;i++)循环遍历所有的box元素,if 判断i是否小于上面求得的列数,设置box元素top.left和把box元素的高度添加进空数组:如果i值大于列数就是第二行其余的box元素,查找出数…

瀑布流布局js

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>瀑布流布局测试</title> <style> body { background-color: #eee; font-size: 84%; text-align: justi…

也来谈谈wap端瀑布流布局

Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作. 瀑布流的主要特性便是错落有致,于乱中见序,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳,同时给人以不拘一格的感觉,切中年轻一族的个性化心理. 最早采用此布局的网站是P…

Bootstrap实战 - 瀑布流布局

讲 Bootstrap 基础的教程网上已经很多了,实际上 Bootstrap 中文网(bootcss.com)里的文档已经写的很详细了,但实战的案例却不多.这里用一些当前流行的网页布局为导向,使用 Bootstrap 中的样式来完成它.每次只讲与案例相关的知识点,边学边练,加强理解.练习本案例需有 HTML/CSS 基础. 一.案例介绍 瀑布流是近几年流行起来的一种网页布局,视觉表现为参差不齐的多栏布局,本案例便是使用 Bootstrap 实现一个瀑布流布局. 二.相关的 Bootstrap 知…