本文实例为大家分享了js瀑布流布局学习资料，供大家参考，具体内容如下
特点：等宽不等高。
实现方式：Javascript/Jquery/CSS3多栏布局。
样例网站：花瓣网-->分类
一、JS实现瀑布流
index.html:页面结构
瀑布流布局
layout.css:页面元素样式
*{
pdding:0;
margin:0;
}
div#main{
position: relative;
}
div.box{
padding:15px 0 0 15px;
float: left;
}
div.pic{
padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
height:auto;
width:165px;
}waterfall.js
window.onload=function(){
waterFall('main','box');
//模拟后台相应数据json
var dataInt={
"data":
[
{"src":"0.jpg"},
{"src":"1.jpg"},
{"src":"2.jpg"},
{"src":"3.jpg"},
{"src":"4.jpg"},
{"src":"5.jpg"},
{"src":"6.jpg"}
]
}
window.onscroll=function(){
if(checkScrollSlide){
//将数据块渲染到当前页面的尾部
var oParent=document.getElementById("main");
for(var i=0;i 二、JQuery
Linux+PHP+MySQL案例教程
本书以培养高级网站建设与管理人才为目标，内容循序渐进，由浅入深，通过大量的实例系统全面地介绍了Linux+PHP+MySQL环境下的网络后台开发技术。本书详尽分析了近30个典型案例。包括计数器、网站流量统计、留言板、论坛系统、聊天室、投票与调查、用户管理、新闻发布系统、广告轮播、购物系统等等，力求让读者通过对案例的学习，轻松掌握PHP和MySQL的编程精要，迅速掌握网络后台开发技巧。
本书适
下载
$( window ).on( "load", function(){
waterfall('main','pin');
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
window.onscroll=function(){
if(checkscrollside()){
$.each( dataInt.data, function( index, value ){
var $oPin = $('').addClass('pin').appendTo( $( "#main" ) );
var $oBox = $('').addClass('box').appendTo( $oPin );
$('![深入学习js瀑布流布局]()
').attr('src','./images/' + $( value).attr( 'src') ).appendTo($oBox);
});
waterfall();
};
}
});
/*
parend 父级id
pin 元素id
*/
function waterfall(parent,pin){
var $aPin = $( "#main>div" );
var iPinW = $aPin.eq( 0 ).width();// 一个块框pin的宽
var num = Math.floor( $( window ).width() / iPinW );//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
//oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
$( "#main" ).css({
'width:' : iPinW * num,
'margin': '0 auto'
});
var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
$aPin.each( function( index, value ){
var pinH = $aPin.eq( index ).height();
if( index < num ){
pinHArr[ index ] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
}else{
var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
var minHIndex = $.inArray( minH, pinHArr );
$( value ).css({
'position': 'absolute',
'top': minH + 15,
'left': $aPin.eq( minHIndex ).position().left
});
//数组 最小高元素的高 + 添加上的aPin[i]块框高
pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了块框后的列高
}
});
}
function checkscrollside(){
var $aPin = $( "#main>div" );
var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
var scrollTop = $( window ).scrollTop()//注意解决兼容性
var documentH = $( document ).height();//页面高度
return (lastPinH < scrollTop + documentH ) ? true : false;//到达指定高度后 返回true，触发waterfall()函数
}三、CSS多栏布局
.container{
-webkit-column-width:160px;
-moz-column-width:160px;
-webkit-column-gap:5px;
-moz-column-gap:5px;
}
/*数据块 砖块*/
.container div{width:160px;
margin:4px 0;}【css3和js实现方法比较】
--css3方式--
1：不需要计算，浏览器自动计算，只需设置1列宽，性能高
2:列宽随着浏览器宽口大小进行改变，用户体验不好；
3：图片排序按照垂直顺序排列，打乱图片显示顺序
4.图片加载还是需要js
--js方式--
js实现的瀑布流不会有上面的缺点，但是性能相对要差！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多深入学习js瀑布流布局相关文章请关注PHP中文网！
相关文章
javascript如何实现动画_有哪些基本的原理【教程】
javascript动画怎样实现平滑效果？【教程】
javascript如何进行性能优化【教程】
如何优化javascript性能_减少重绘和回流的技巧有哪些
javascript性能优化有哪些技巧_如何减少页面重绘和回流？
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
