横版瀑布流自动排序及页面左右滑动_CSS瀑布流左右优先资源-CSDN文库资源-CSDN文库

共5个文件

js：2个

png：1个

css：1个

自适应高度

页面左右滑动

3星 · 超过75%的资源需积分: 50 136 浏览量 2014-03-14 02:31:07 上传评论收藏 42KB RAR 举报

标题中的“横版瀑布流自动排序及页面左右滑动”是指一种网页布局方式，它将传统的垂直瀑布流布局转换为横向展示，同时结合了页面的左右滑动功能，以实现更好的用户体验。这种布局通常用于图片展示、商品列表或文章列表等场景，能够有效地利用屏幕空间，增加视觉吸引力。我们要理解“瀑布流”（Masonry Layout）的概念。这是一种不规则的网格布局，每个元素（如图片或卡片）的宽度固定，但高度根据内容自适应，形成类似瀑布下落的效果。在横版瀑布流中，这种效果是水平方向上的，使得页面元素沿水平线错落分布，而非传统的垂直排列。 “自适应高度”意味着网页设计会根据浏览器窗口的大小动态调整元素的高度，确保在不同设备和分辨率下都能保持良好的显示效果。这通常通过响应式设计（Responsive Design）和媒体查询（Media Queries）来实现，以确保内容在各种屏幕尺寸上都能适配和显示。接下来，提到的“鼠标滚轴控制页面左右滑动”是一项交互功能，允许用户通过鼠标滚轮或触摸板左右滚动页面，而不是仅限于上下滚动。这需要JavaScript库的支持，通过监听滚轮事件并触发横向滚动，增强用户浏览长页面的便利性。在提供的文件名中，我们可以看到几个关键组件： 1. `jquery.mCustomScrollbar.css`：这是jQuery Custom Scrollbar插件的样式文件，用于自定义滚动条的外观和行为，使其更符合页面设计。 2. `左右滚动+瀑布流.htm`：这是一个HTML文件，很可能包含了实现横版瀑布流和左右滑动的代码示例。 3. `jquery.min.js`：这是jQuery库的精简版本，它是JavaScript库，提供了许多便捷的DOM操作和事件处理方法，对于实现页面交互功能至关重要。 4. `jquery.mCustomScrollbar.concat.min.js`：这是jQuery Custom Scrollbar插件的JavaScript文件，包含了实现自定义滚动条功能的代码。 5. `mCSB_buttons.png`：这可能是滚动条箭头按钮的图片资源，用于美化滚动条的控制元素。综合以上，实现这个功能需要HTML、CSS和JavaScript的配合。HTML用于构建页面结构，CSS负责样式设计和自适应布局，而JavaScript（尤其是jQuery库和jQuery Custom Scrollbar插件）则用于实现横版瀑布流布局以及鼠标滚轮控制的左右滑动交互。开发者需要了解这些技术，并结合实际需求进行适当的代码编写和调试。

展开

资源推荐

资源详情

资源评论

收起资源包目录

.rar （5个子文件）

jquery.mCustomScrollbar.concat.min.js 25KB

jquery.min.js 93KB

左右滚动+瀑布流.htm 4KB

mCSB_buttons.png 1KB

jquery.mCustomScrollbar.css 13KB

      <!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>&nbsp;</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>