横版瀑布流自动排序及页面左右滑动_安卓有没有横向的瀑布流列表资源-CSDN文库

共5个文件

js：2个

png：1个

css：1个

自适应高度

页面左右滑动

3星 · 超过75%的资源需积分: 33 134 浏览量 2014-03-14 10: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> 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>  <link href="jquery.mCustomScrollbar.css" rel="stylesheet" /> </head> <body> <div id="content-1" class="content"> <div class="content-wrapper"></div> </div> <hr /> <p> </p>  <script src="jquery.min.js"></script>  <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>

评论收藏

内容反馈