<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery custom scrollbar demo</title>
<!-- style for demo and examples -->
<style>
body{margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px;}
a:link,a:visited,a:hover{color:inherit;}
h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
p{margin:0 0 20px 0;}
hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.13); border-top:1px solid rgba(0,0,0,1); margin:9px 10px; clear:both;}
.links{margin:10px;}
.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.links a:hover{background:#eb3755; color:#fff;}
.output{margin:20px 40px;}
.output a{display:inline-block; text-decoration:none; padding:3px 15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#000; margin:5px 20px 5px 0;}
code{color:#5b70ff;}
.content{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.content p{min-height:320px;}
.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
.content p:nth-child(3n+0){color:#c96;}
#content-1{overflow:hidden; padding:20px; width:100%;}
#content-1 p{float:left; width:300px; min-width:100px; margin-right:10px; background:rgba(0,0,0,0.3); padding:10px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
#content-1 p:last-child{width:auto; margin-right:0;}
#content-1 .content{background:#252525; width:300px; height:340px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; float:left; margin-right:10px;}
#content-1 .content p{float:none; width:auto; margin-right:0; min-height:auto;}
.content-wrapper .asd{background:#fff; width:200px; height:50px; border:solid 1px #ccc; text-align:center; padding:10px; margin:10px;}
</style>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
</head>
<body>
<div id="content-1" class="content">
<div class="content-wrapper"></div>
</div>
<hr />
<p> </p>
<!-- Google CDN jQuery with fallback to local -->
<script src="jquery.min.js"></script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content-1").mCustomScrollbar({
scrollButtons:{
enable:true
},
horizontalScroll:true,
advanced:{autoExpandHorizontalScroll:true,updateOnContentResize:false}
});
});
})(jQuery);
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
for(var i=0, j=24; i<j; i++){//i控制循环，代表li的序号，j表示li的长度、个数、大小
$(".content-wrapper").append("<div class='asd'>"+i+"</div>");
}
function resize(){
var width = $(window).width();//窗口宽度
var height = $(window).height();//窗口宽度
var tlen = $(".content-wrapper .asd").size();//li个数
var li_left = $(".content-wrapper .asd").outerWidth()+20;//绝对定位的左距离
var li_top = $(".content-wrapper .asd").outerHeight()+20;//绝对定位的上距离
var wlen = Math.floor(height/li_top);//每一列的li个数
var f_width = li_left*Math.ceil(tlen/wlen);
$(".content-wrapper").css({"width":f_width,"height":height});
$(".content-wrapper .asd").each(function(){
var index = $(this).index();
var li_left_ = Math.floor(index/wlen);//当li在一行放不下之后断行
index = index%wlen;//每行的li的top/left从新开始
$(this).css({"position":"absolute","left":li_left_*li_left,"top":index*li_top});
});
}
resize();
window.onresize = resize;
});
</script>
</body>
</html>
.rar （5个子文件） 
jquery.mCustomScrollbar.concat.min.js 25KB jquery.min.js 93KB 左右滚动+瀑布流.htm 4KB
mCSB_buttons.png 1KB jquery.mCustomScrollbar.css 13KB资源评论
沉睡的潇洒哥2017-07-04不是我想要的效果，收这么高的积分，真坑人。
neilcn2014-06-19非框架类的 初学借鉴一下
hulianglove2016-02-15值得大家下载来学习！- a1136794592014-07-21资源挺好的，有用！！
