JavaScript实现自适应宽度的瀑布流

2019-09-08 郑州网站建设  

这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网、美丽说等等。而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea。


  OK,现在进入正题。这里主要介绍瀑布流的一种实现办法:绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动加载更多内容的时候用到的。


  下面是实现思路:


  1、计算页面的宽度,计算出页面可放数据块的列数(如上图所示就有6列)。

  2、将各个数据块的高度尺寸记入数组中(需要等所有图片加载完成,否则无法知道图片的高度)。

  3、用绝对定位先将页面第一行填满,因为第一行的top位置都是一样的,然后用数组记录每一列的总高度。

  4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。

  5、当浏览器窗口大小改变时,重新执行一次上面1-4步以重新排放(列数随页面宽度而改变,因而需要重新排放)。

  6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。


  思路有了,然后就是怎么用代码实现。当然,如果看完以上的6个步骤你已经知道怎么实现,那么下面的内容大可不必细看。


  首先在页面上写好基本的HTML和CSS(为方便起见,CSS就不外联了),代码如下:


1 DOCTYPE html2 <html3 <head4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>瀑布流布局title6<style type="text/css"> 7 body{margin:0; font-family:微软雅黑;} 8#flow-box{margin:10px auto 0 auto; padding:0; position:relative} 9#flow-box li{ 10 width:190px; position:absolute; padding:10px;border:solid 1px #efefef; list-style:none; 11 opacity:0; 12 -moz-opacity:0; 13 filter:alpha(opacity=0); 14 -webkit-transition:opacity 500ms ease-in-out; 15 -moz-transition:opacity 500ms ease-in-out; 16-o-transition:opaicty 500ms ease-in-out; 17 transition:opaicty 500ms ease-in-out;} 18 #flow-box li img{width:100%;} 19 #flow-box li a{display:block; width:100%; text-align:center; font-size:14px;color:#333; line-height:18px; margin-top:10px; text-decoration:none;} 20 .loadwrap{position:absolute; left:0;width:100%; text-align:center;} 21 style22 head23 <body24 <ul id="flow-box"> 25 <li><img src="" /><href="#">图片标题1a>li26 <li><img src="" /><href="#">图片标题2a>li27 <li><img src="" /><href="#">图片标题3a>li28 <li><img src="" /><href="#">图片标题4a>li29 <li><img src="" /><href="#">图片标题5a>li30 <li><img src="" /><href="#">图片标题6a>li31 <li><img src="" /><href="#">图片标题7a>li32 <li><img src="" /><href="#">图片标题8a>li33 <li><img src="" /><href="#">图片标题9a>li34 <li><img src="" /><href="#">图片标题10a>li35 <li><img src="" /><href="#">图片标题11a>li36 <li><img src="" /><href="#">图片标题12a>li37 <li><img src="" /><href="#">图片标题13a>li38 <li><img src="" /><href="#">图片标题14a>li39 <li><img src="" /><href="#">图片标题15a>li40 <li><img src="" /><href="#">图片标题16a>li41 <li><img src="" /><href="#">图片标题17a>li42 <li><img src="" /><href="#">图片标题18a>li43 <li><img src="" /><href="#">图片标题19a>li44 <li><img src="" /><href="#">图片标题20a>li45 ul46 <div id="loadimg" class="loadwrap"><img src="Images/load.jpg" />div47 body48 html>



河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1438.html转载请标明出处,谢谢合作!
标签:
  • javascript
  • 布局
  • 这样
  • 陌生