JS瀑布流布局模式(2)

这个例子与上一篇类似,唯一的区别是排序的方式有差别。上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容。

两种方法各有优缺点。第一种需要在图片内容加载完成的情况下有效,各个列的图高度差异不大。这个例子不需要在window.onload之后执行,直接计算每列的索引,按照顺序一列一列的放置,在图大小不同的时候列的高度可能会有很大的差距。用下面的图做说明。

说明:

上一个案例如下图:

源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>waterfall布局</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna‘s js lib" />
<meta name="description" content="waterfall布局" />
<style>
*{margin:0;padding:0;}
li{list-style:none;}
p{margin:20px;}

.list li{float:left;min-height:10px;margin:0 0 0 20px;}
.list .item{margin:0 0 10px;}
.list img{display:block;width:100%;}

#content{display:none;}
</style>
</head>

<body>
<div class="content" id="content">
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_101.jpg" />01</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_102.jpg" />02</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_103.jpg" />03</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_104.jpg" />04</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_105.jpg" />05</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_106.jpg" />06</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_107.jpg" />07</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_108.jpg" />08</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_109.jpg" />09</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_110.jpg" />10</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_111.jpg" />11</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_112.jpg" />12</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_113.jpg" />13</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_114.jpg" />14</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_115.jpg" />15</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_116.jpg" />16</div>
    <div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_117.jpg" />17</div>
</div>
<div class="list" id="list"></div>

<script>
var waterFall = {
    content:document.getElementById(‘content‘),    //存放内容的容器
    list:document.getElementById(‘list‘),   //将要展示的列表容器

    setOptions:function(options){
        options = options || {};
        this.colNum = options.num || 3;   //显示的列数,默认显示3列
        this.colWidth = options.width || 200;   //每列的宽度
    },

    //构建列数
    setColumn:function(){
        var self = this;
        var html = ‘‘;
        for(var i=0,l=self.colNum;i<l;i++){
            html += ‘<li style="width:‘+ self.colWidth +‘px;"></li>‘;
        }
        self.list.innerHTML = html;

        self.column = self.list.getElementsByTagName(‘li‘);
    },

    //填充内容
    setCont:function(cnt){
        var self = this;
        self.index = self.index%self.colNum || 0;   //将要放置内容的列的索引,默认从0开始
        self.column[self.index].appendChild(cnt);
        self.index ++;
        if(!!self.content.children[0]){
            self.setCont(self.content.children[0]);
        }
    },

    init:function(options){
        var self = this;
        self.setOptions(options);
        self.setColumn();
        self.setCont(self.content.children[0]);
    }
};

waterFall.init();
</script>
</body>
</html>

出处:http://www.cnblogs.com/zourong/p/3934738.html

时间: 2024-11-07 17:59:27

JS瀑布流布局模式(2)的相关文章

JS瀑布流布局模式(1)

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

js瀑布流布局

绝大多数的网页都是分为几列进行排版(几个div),传统布局就是将内容模块直接写在这几个div中.但是这种布局存在一个问题,那就是如果这个页面的信息非常的庞大,内容很多时这几列div会非常的长.而浏览器是逐行加载的,上述情况下会出现页面一直在加载第一列的内容,半天加载不完,而另外的几列什么都不显示. 用户是横向观看网页的,而上述情况下网页却是在逐列的纵向加载,这使得用户体验极差.为解决这种情况,就需要瀑布流布局.在几列中进行横向加载. 代码如下: function fnRand(min,max){

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

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

我的第一篇博客 —— 用 js 和 css 简单实现瀑布流布局

一个拖延症晚期患者的自述: 注册了博客快一个月了,终于要迎来我的第一篇博客了哈哈哈!!! 刚注册的时候,满脑子要频繁更新,扩充自己的知识库,一到真正落实,就不得不为懒惰屈服,还好有了学习计划,以后应该会每周一更(不更当我没说).当然了,肯定是希望被更多人看到,帮助到大家,如果没人看的话就当作是自己的积累与记录吧! 还有,我目前工作是前端工程师,还是一名刚入行不久的菜鸟哈哈哈!!!现在主要目标是先把前端知识巩固好,再逐步往全栈领域发展(毕竟装13是我一生的职责). 所以,请各位大佬们多多指教,如果

微信小程序 瀑布流布局

今天做小程序的时候,碰到一个比较常见的需求,就是要瀑布流布局,两列,交错分布,大概如下图 最终要实现的结果就是如左图所示. 不过在微信小程序里面,不能通过JavaScript来直接操作dome,所以一些常用的方法在这里都没有办法用了.这让笔者非常着急,因为项目比较赶,不能因为这种低级的布局问题拖慢了进度. 百度了半天,发现了css3的column这个属性,但是最后实现出来的方法就如右图所示,这不符合需求,需求是两列,从左到右进行排列的,大概就像小红书APP那种瀑布流布局 最后笔者终于找到一种非常

JavaScript——基本的瀑布流布局及ajax动态新增数据

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

页面瀑布流布局的实现 javascript+css

先看所谓的瀑布流布局 在不使用瀑布流布局的情况下,当页面要显示不同高度的图片时,会如下面显示 下面的元素总是和最靠近它的元素对齐. 为了使元素能够在我们想要的位置上显示,我们使用绝对定位. 说一下大体思路(也是看了别人的):一切的不对齐都是从第一行的图片排列开始的,也许不是很准确,那么换一个说法:要想使图片排列整齐,那么就得从第一行排列开始.假设第一行x个元素排列中有一个最矮的(假设不假设都一样,假设是为了便于理解),较高的元素比这个最矮的要多出一块区域来,那么第二行就要有人去把这个多出来的区域

10几款网站瀑布流布局图片无限加载动效

jQuery选项卡形式图片瀑布流布局选项卡切换效果代码 jquery masonry瀑布流插件制作图片瀑布流布局代码 原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果 jquery masonry瀑布流插件制作图片瀑布流布局代码 jquery柔韧性的图片滑动瀑布流布局 jquery时间轴插件文字图片瀑布流布局时间轴特效(不兼容IE678) modernizr html5图片预加载瀑布流布局鼠标悬停动画效果代码 jquery.waterfall.js自动底部填充对齐的瀑布流布局代码 jquer

js瀑布流的代码

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery瀑布流布局(每行代码都有详细注释)-作者:刘晓帆</title> <style type="text/css"> body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold