网页瀑布流布局jQuery实现代码

什么是瀑布流网页布局？

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

下面来看代码，用纯CSS3来做看效果怎样！

超文本标记语言

div id=' all ' div class=' box ' div class=' pic ' img src=' http : cars/1。jpg '/div/div class=' box ' div class=' pic ' img src=' http : cars/2。jpg '/div/div class=' box ' div class=' pic ' img src=' http 3360 cars/3。jpg '/div/div class=' box ' div class=' pic ' img src这里用一个大盒子来装全部内容，小盒子包厢装块内容，图片盒子装图片。看钢性铸铁的代码

半铸钢钢性铸铁(铸造半钢)

* { margin : 0；padd : 0；}#all{/*关键代码*/-网络套件-柱宽： 437像素；蚊子柱宽： 437像素；表示“具有…性质的”形柱-宽度： 437像素；女士色谱柱宽度： 437像素；/*-web套件-列数-: 3；-moz-柱数： 3；表示“具有…性质的”柱-计数： 3；-ms-柱计数： 3；*//*-网络工具包-栏目-规则： 2px虚线# F00-moz-column-rule: 2px虚线# F00-o柱-规则： 2px虚线# F00-ms-column-rule: 2px虚线# F00 *//*-腹板套件-立柱-间隙： 5px-moz-色谱柱-间隙： 5px表示“具有…性质的”形柱-间隙gap: 5px-ms-色谱柱-间隙： 5px*/}.box { padding: 15px 0 0 15px }。pic { padd : 10pxborder : 1px固体# cccborder-radius : 5px；盒影： 0 5px # CCC宽度： 400像素；}.picimg { width : 400 pxh8 : auto }效果就出来了

可见CSS3虽然实现了瀑布流，但是画风看起来诡异，左右排布间距不够灵活。列宽随着浏览器窗口大小进行改变，用户体验不好，图片排序按照垂直顺序排列，打乱图片显示顺序，图片加载还是依靠Java脚本语言来实现。唯一优势是不需要计算，浏览器自动计算，只需设置列宽，性能高。

为了得到更好的效果，所以我们还是用算法来实现吧，下面来看jquery代码配合钢性铸铁来实现瀑布流。

半铸钢钢性铸铁(铸造半钢)

* { margin : 0；padd : 0；} # all { position: relative}。box { padding: 15px 0 0 15px向左浮动：}.pic { padd : 10pxborder : 1px固体# cccborder-radius : 5px；盒影： 0 5px # CCC}.picimg { width : 400 pxhway : auto } jquery

$(窗口)。load(function(){ 0瀑布();//var dataInt={ ' data ' :[{ ' src ' : ' cars/1。jpg ' }、{'src':'cars/2.jpg'}、{'src':'cars/3.jpg'}、{ ' src ' : ' cars/4。jpg ' } } }//$(窗口).scroll(function(){//if(Checkscrolslide){//$).每个(dataInt.data，function(key，value){//var oBox=$('div ').addClass('box ').appendTo($(' # all '))；//var oPic=$('div ').addClass('pic ').appendTo($(oBox))；//var oImg=$('img ').attr('src '，$(值)。attr('src ').appendo($(OPic))；//})//瀑布();//}/})})函数瀑布(){ var $ box=$(' # all div ')；var w=$boxs.eq(0).out width()；var cols=Math.floor($(窗口)。宽度()/w)；$('#all ').宽度(w*cols).css('margin '，' 0 auto ')；var HARr=[]；$boxs .每个(函数（索引，值){var h=$boxs.eq(索引)。outhealth()；if(index cols){ HARr[index]=h；} else { var MInh=Math。量滴应用(null，HARr)；var minHIndex=$ .inArray(minH，HARr)；//控制台。日志(MInh)；$(值)。css({'position':'absolute '，' top':minH 'px '，' left ' : Minh index * w ' px ' })HARr[Minh index]=$ boxs。情商(指数).outhealth()；}});}//函数checkscrollsslide(){//var $ LastBox=$(' # all div ').last()；//var lastbox dis=$ lastbox。偏移量().顶级数学。floor($ lastbox)。outhealth()/2)；//var scrollTop=$(窗口)。滚动顶部()；//var documentH=$(窗口)。高度();//返回(lastBoxDisscrollTop文档h)？true : false/}效果如下

很明显效果好多了，图片排序是按照图片计算的位置横向排序，位置是计算出来的，比较规范。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。