时间:2021-07-01 10:21:17 帮助过:4人阅读
- <br><div id="main"> <br> <ul class="pics"> <br> <li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li> <br> <li><div class="pic"><img /></div> <div class="content">anytext..</div> </li> <br> ... <br> </ul> <br> <ul class="pics"> <li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li> <br> <li><div class="pic"><img /></div> <div class="content">anytext..</div> </li> <br> ... <br> </ul> <br> .... <br></div> <br> <br>css定义如下: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>.pics { <br> float:left; <br> list-style:none; <br> margin-left:10px; <br> margin-right:10px; <br> width:230px; <br>} <br>.pics li { <br> display:block; <br> width:100%; <br> margin:0 auto; <br> margin-bottom:10px; <br> position:relative; <br> background-color:#FFF; <br> box-shadow: 0 1px 2px 0; <br> padding-top:10px; <br>} <br>.pic { <br> width:92%; margin:0 auto; <br> padding-top:10px; <br> text-align:center; <br> font-size:180px; <br> background-color:#0CF; <br>} <br>.pic img { <br> width:100%; <br> margin:0 auto; <br>} <br>.content { <br> width:92%; <br> margin:0 auto; <br> padding-top:10px; <br> height:50px; <br> text-overflow:ellipsis; <br> white-space:nowrap; <br> overflow:hidden; <br>} <br> <br><strong>脚本实现如下:</strong> <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>$(function(){ <br>//alert($(window).height()); 浏览器当前窗口可视区域高度 <br>//alert($(document).height()); <br>//浏览器当前窗口文档的高度 alert($(document.body).height()); <br>//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true)); <br>//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); <br>//浏览器当前窗口可视区域宽度 alert($(document).width()); <br>//浏览器当前窗口文档对象宽度 alert($(document.body).width()); <br>//浏览器当前窗口文档body的高度 alert($(document.body).outerWidth(true)); <br>//浏览器当前窗口文档body的总宽度 包括border padding margin <br>$(document).scroll(function(){ <br>var pics=$(".pics"); <br>var sc=$(document).scrollTop(); <br>$("#float").text(sc); <br>for(var i=0;i<pics.length;i++){ <br>var pic=pics.eq(i); <br>var bottom =pic.offset().top+pic.height(); <br>if((sc+$(window).height())>=bottom){ <br>eval( "var word=" + '"\\u' + (Math.round(Math.random() * 20901) + 19968).toString(16)+'"'); <br>var li="<li> <div class='pic'>"+word+"</div><div class='content'>梦里过客笑眼望,望回廊,秋螽藏</div></li>"; <br>pic.append(li); <br>} <br>} <br>}); <br>}); <br> <br>这样做基本实现了最简单的一个瀑布流,但是脚本中并没有考虑内存消耗,即无限加载的问题。现在我也没搞懂,以后再完善吧 。 <br><strong>来看效果:<br><img src="https://img.gxlcms.com//Uploads-s/new/2019-09-17-201917/2013527164352203.jpg"></strong></li><li> </li><li> </li></ol></pre></li></ol></pre>