0x01 前言

今天在tumblr上看到其瀑布流布局，如下图，觉得很有意思便研究了下，发现tumblr使用position:absolute布局的。

照我之前的想法呢，是根据窗口大小，建立N条Col，然后依次将item append到col中。这样成本会小很多，因为只需要写好col的css即可：float:left或display:inline-block。

0x02 代码编写

HTML，CSS

结构很简单，具体请参考底部的实例。

js

先上全部JS代码

            $(function() {var data = Mock.mock({'items|80': [{bgcolor: 'whitesmoke',title: '@title(3,5)',passage: '@paragraph(1,3)',img: '@dataImage(300x220)'}]}).items;var itemWidth = 320;var itemTpl = $('#tpl .falls-item');var wrapper = $('.list-container');var promiseArr = [];var colCount = Math.floor((window.innerWidth - 17) / 320);var colTop = []; //每一列最后的高度值for (var i = 0; i < colCount; i++) {colTop.push(0);}console.log(colCount);data.forEach(function(val, index) {var item = itemTpl.clone();var colIndex = (index % colCount); //计算出列索引var itemLeft = colIndex * itemWidth; //列数index * 宽度 = left值var itemTop = colTop[colIndex]; //当前列最后的高度值item.find('.title').text(val.title);item.find('.content').text(val.passage);item.find('img').attr('data-src', val.img).attr('data-index', index);item.css({'background-color': val.bgcolor,width: itemWidth,});wrapper.append(item);var dtd = $.Deferred();promiseArr.push(dtd);var prev = new Date().getTime();setTimeout(function() {item.css({left: itemLeft,top: itemTop});console.log(new Date().getTime() - prev);setTimeout(dtd.resolve, 850);}, 300)//插入后更新最后高度值colTop[colIndex] += $(item).height();});var imgs = $('.list-container img[data-lazy-load]');$.when.apply($, promiseArr).done(function() {console.log('animate Done');imgs.scrollFire(150, function(el) {//console.log(el.dataset.index);el.src = el.dataset.src;$(el).addClass('animated fadeIn');});$(window).trigger('scroll');})

我就捡重点讲~

首先我们用MockJS生成随机数据，格式如下：

        var data = Mock.mock({'items|80': [{bgcolor: 'whitesmoke',title: '@title(3,5)',passage: '@paragraph(1,3)',img: '@dataImage(300x220)'}]}).items;

生成好数据后，我们做一些初始化准备

var itemWidth = 320;//这里的列宽我们预设为320px，否则不好控制。var colCount = Math.floor((window.innerWidth - 17) / 320); //计算列数，减去17是减去滚动条的宽度var promiseArr = []; 为每个动画元素生成promise，在动画执行完毕时，可以通知我们。

接着就是对数组循环遍历，插入HTML。

var colIndex = (index % colCount); //计算出列索引，这里用取余的方式
var itemLeft = colIndex * itemWidth; //列数index * 宽度 = left值
var itemTop = colTop[colIndex]; //当前列最后的高度值，插入HTML后，此值将会更新。

0x03 注意要点

滚动条

当body内容超过window大小，则会出现滚动条，滚动条是占据空间的。

window.innerWidth

$(window).height() == $(body).width()

$.when

$.when的调用方法是$.when(arg1,arg2)，如果直接传入数组，会执行不成功，因此我们用$.when.apply()的方式。

0x04 最终效果

See the Pen xZJdme by chenchen (@larry011) on CodePen.

jQuery实现动态瀑布流布局效果相关推荐

动态瀑布流布局的图片墙
要实现动态瀑布流布局的图片墙:要做到两点: 一.实现瀑布流的图片墙, 二.使用函数节流监听window的resize事件首先:实现瀑布流的图片墙,网上有各种各样式的实现,但是纯css的实现,总是有些 ...
vue环境简单实现动态瀑布流效果
vue环境简单实现动态瀑布流效果最近开发项目需要实现动态瀑布流效果,项目本身是vue环境,网上很难找到类似的效果,vue-waterfall插件,懂的都懂.看了源码就知道不符合我项目目前的场景.(列 ...
使用jquery+css实现瀑布流布局
虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquery+css来实现瀑布流布局,最终效果如下: 思路是通过将每个小块的position设置为relativ ...
jQuery+PHP动态数字展示效果
我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果. 查看演示下 ...
使用css3实现瀑布流布局效果
使用CSS3可以轻松实现瀑布流布局,但这种方法有个缺点,就是对于商城类型的网站,价格筛选时,并不能达到理想效果. 1.column-count 把div中的文本分为多少列 2.column-width ...
html瀑布流布局原理,css 实现瀑布流布局效果
使用CSS3可以轻松实现瀑布流布局 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside ...
仿pinterest实现瀑布流布局效果
在张鑫旭的博客里,有一片文章介绍瀑布流实现的文章,(要查看演示,请单击DEMO)本文是在其基础上进行的二次开发,使其更具实用性. 这里,主要涉及数据从数据库里读取,单击图片可以缩放等. 本文附件附 ...
瀑布流布局(原生js,jQuery实现)
项目地址: 瀑布流布局实战阅读人群: 懂html,css,js,jquery的coder 阅读时间: 60minutes 1. 瀑布流式布局简介什么是瀑布流布局一种网站页面布局,视觉表现为参差不 ...
JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

jQuery实现动态瀑布流布局效果