瀑布流布局 | 易学教程

瀑布流布局与 jQuery Ajax 分页

阅读更多关于瀑布流布局与 jQuery Ajax 分页

在 Kayo 的上一篇文章轻图床的新前端与瀑布流布局曾经简略介绍过瀑布流布局，所谓的瀑布流效果就正如轻图床首页效果那样，多个内容相近的栏目紧密排列，尽量使到栏目间的间隙最小（即流体布局），并且随着页面滚动条向下滚动，新的数据会追加至当前页面的尾部直到所有数据加载完毕（滚动触发的 Ajax 翻页）。本文将会介绍如何实现瀑布流布局中的 Ajax 翻页，至于如何实现栏目间的紧密排列，本文将会简略介绍但不在重要的讨论范围。一.实现原理实现瀑布流布局主要分为两个部分，一是实现流体布局，这里我们采用绝对定位的方式实现，而是滚动触发的 Ajax 分页，这里采用 jQuery 的 Ajax 实现。第一部分将会采用 Masonry jQuery plugin 。Masonry jQuery plugin 是一款实现流体布局的 jQuery 插件，下文将以轻图床的首页 HTML 为例，给出一个 Masonry 流体布局的实例。第二部分使用 jQuery 的 scroll() 事件触发 Ajax ，触发后使用 jQuery 的 ajax() 方法异步加载新内容，下文将给出完整实例。二.Masonry 实现的流体布局假设网站中的 HTML 如下 <div id="content">  <div id="thumbs">

网页瀑布流布局插件Masonry

阅读更多关于网页瀑布流布局插件Masonry

CSS3有实现类似瀑布流布局的属性column，但是遗憾的是这种布局是纵向布局而不支持横向布局。所以比较合适用于文字多列布局。调用JQuery WaterFall布局插件： http://masonry.desandro.com/ HTML其中要定义一个容器： <div id="container"> <div class="item">...</div> <div class="item w2">...</div> <div class="item">...</div> ... </div> 用JAVASCRIPT初始化 var container = document.querySelector('#container'); var msnry = new Masonry( container, { // options columnWidth: 200, itemSelector: '.item' }); 在HTML元素上初始化 <div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'> 使用JQuery实例化 var $container = $('#container'); // initialize

js实现瀑布流布局

阅读更多关于 js实现瀑布流布局

js实现瀑布流布局原理代码实现功能： 1、定义函数 waterfall（parent,box）实现瀑布流布局。 2、当拖动滚动轴时候，到底部时候会触发添加元素事件，瀑布流布局。瀑布流思路：第一排自由排版，记录第一排元素的高度存入数组，之后出现的元素都会放到数组高度最小的元素下面，绝对定位方式（x-上面元素数组内序号*每个元素宽度 y-上面元素的高度），并且每执行一次，会重新定义高度最小的值，之前高度加上当前元素的高度，存入数组。之后元素都如此执行。如此每个新增元素都会放置在最小高度元素下面，也就实现瀑布流。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>瀑布流</title> <style type="text/css"> *{margin: 0; padding: 0;} #main{ /* width: 1000px; max-width: 1000px;*/ margin :0 auto; position: relative; } .box{ float: left; padding: 15px 0 0 15px; } .pic{ padding: 15px; border:1px solid #ccc; border-radius: 10px; box-shadow: 0 0

响应式布局页面之瀑布流布局浅析

阅读更多关于响应式布局页面之瀑布流布局浅析

瀑布流式布局（简称瀑布流）最先在网站上应用 Pinterest ( 貌似是最早使用这种布局的网站了)， Mark之，蘑菇街，点点网等页面都采用了这种布局。那么什么是瀑布流呢？瀑布流的好处在哪？瀑布流，又称瀑布流式布局、瀑布墙。是目前比较流行的一种网站页面布局方式，视觉表现为参差不齐的多栏布局，随着瀑布流效果页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。瀑布流的布局原理：这种布局是基于响应式布局的。他可以根据浏览器宽度以及每列宽度计算出列表个数。来动态加载图片。且需要预加载几张图片，再当滚动条滚动的时候，对每一列的底部位置做检测，如果在屏幕中或屏幕上方，则立即append一个新图片。因为，滚动是连续的，所以，我们实际看到的效果是图片不断load出来。(如果加载的图片太多最好做好本地缓存)。让用户的体验效果更佳。瀑布流的实现方法：方法一：当浏览器宽度改变的时候，页面上有个 id 为 waterFallDetect 空 span 标签，这个标签作用有两个：一是实现两端对齐效果，二是用来检测瀑布流布局是否需要刷新。检测原理如下：该 span

瀑布流布局（基于多栏列表流体布局实现）

阅读更多关于瀑布流布局（基于多栏列表流体布局实现）

转在前面：（淘宝UED ） 3) 绝对定位。即 Pinterest ，Mark之，KISSY 采用的方式: 可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；线上例子。缺点: 需要实现知道数据块高度，如果其中包含图片，需要知道图片高度； JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。 KISSY.Waterfall 实现思路 KISSY 的 Waterfall 组件主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置；二是下拉滚动时，触发加载数据操作，并把数据添加到目标容器中。 1) 数据块排列，算法步骤简述下: 初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定: a，容器元素 — 以此获取容器总宽度； b，列宽度； c，最小列数；最终列数取的是容器宽度/列宽度和最小列数的最大值，这样保证了，当窗口很小时，仍然出现最小列数的数据；获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少；依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束；当所有元素插入完毕后，调整容器的高度为各列最大的高度值

js实现瀑布流布局

阅读更多关于 js实现瀑布流布局

js实现瀑布流布局原理代码实现功能： 1、定义函数 waterfall（parent,box）实现瀑布流布局。 2、当拖动滚动轴时候，到底部时候会触发添加元素事件，瀑布流布局。瀑布流思路：第一排自由排版，记录第一排元素的高度存入数组，之后出现的元素都会放到数组高度最小的元素下面，绝对定位方式（x-上面元素数组内序号*每个元素宽度 y-上面元素的高度），并且每执行一次，会重新定义高度最小的值，之前高度加上当前元素的高度，存入数组。之后元素都如此执行。如此每个新增元素都会放置在最小高度元素下面，也就实现瀑布流。 <!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> 瀑布流 </title> <style type = "text/css" > *{ margin : 0 ; padding : 0 ;} #main{ /* width: 1000px; max-width: 1000px;*/ margin : 0 auto ; position : relative ; } . box { float : left ; padding : 15px 0 0 15px ; } . pic { padding : 15px ; border : 1px solid #ccc; border -

纯CSS实现瀑布流布局

阅读更多关于纯CSS实现瀑布流布局

瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。还是上张图来看看我们说的瀑布流布局是什么样子。当初要实现这样的布局都是依赖于JavaScript来实现，所以当时出现过很多实现瀑布流布局的插件。比如Masonry、Isotope等都是非常有名的插件。但使用纯CSS来实现，当时还是非常困难的，不管是使用float还是inline-block布局都无法很好的控制列表项目堆栈之间的间距。最终得到的效果就像下面这样：著作权归作者所有。现在距离2012年已经过去了五个年头，CSS的技术更新也是日新月异，在这几年当中出现了很多新的布局方法，比如多列布局multi-columns、Flexbox布局以及今年浏览器支持有Grid布局。早前在《CSS布局的未来》一文中有对这些布局做过阐述。既然CSS的布局有这么多的变化，那么今天有没有不借助任何JavaScript

浅谈页面的瀑布流布局

阅读更多关于浅谈页面的瀑布流布局

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。瀑布流布局效果即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。那么规则是什么呢？下面通过图解来分析一下瀑布流的算法。图解瀑布流算法当第一排排满足够多的等宽图片时（如下图情况），自然而然的考虑到之后放置的图片会往下面排放。那么第六张图片，放置在什么位置呢？是下图的位置么？我们通过瀑布流算法实验得到，后面紧跟的第六张图片的位置应该是这个位置。为什么呢？因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。所以我们知道了，如果再继续放置下去，第七张图片应该是这个位置，对吗？通过瀑布流算法实验得出位置正确。看懂这个图示应该就能理解了瀑布流的原理算法。 JS 实现代码 var colCount //定义列数 var colHeightArry= [] //定义列高度数组 var imgWidth = $('.waterfall img').outerWidth(true) //单张图片的宽度 colCount = parseInt($('.waterfall').width()/imgWidth) //计算出列数 for

RecyclerView 瀑布流布局

阅读更多关于 RecyclerView 瀑布流布局

最后一个布局样式是瀑布流的布局，其实和网格布局几乎一样的，网格布局是规规矩矩的，而瀑布流就是有长有短的那种，有错位和落差感，有时候太规矩的不好看，有一点错位显得更加美观。 ? ? 瀑布流的?RecyclerView Item 布局文件要注意了，不能写固定的一个高度，否则就没有效果了。比如，我们得这样改： <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" app:cardCornerRadius="8dp" app:cardElevation="4dp"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:padding=

订阅瀑布流布局