全国服务热线:4008-888-888

公司新闻

深圳小程序开发_基于JavaScript完成瀑布流布局

基于JavaScript实现瀑布流布局       这篇文章主要为大家详细介绍了基于JavaScript实现瀑布流布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下

1、html+css+js代码:

 !DOCTYPE html 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html" charset="utf-8" / 
 title hhh /title 
 /head 
 body 
 style type="text/css" 
 padding: 0;
 margin: 0;
 #main{
 position: relative;
 .pin{
 float: left;
 padding: 15px 0 0 15px;
 .box{
 border-radius: 5px;
 box-shadow: 0 0 6px #ccc;
 border:1px solid #ccc;
 padding: 10px;
 .box img{
 width: 162px;
 height:auto;
 /style 
 script type="text/javascript" 
 window.onload = function(){
 waterfall("main","pin");
 var dataint = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
 window.onscroll = function(){
 if (checkscrollside()) {
 var oparent = document.getElementById('main');
 for (var i = 0; i dataint.data.length; i++) {
 var opin = document.createElement('div');
 opin.className = 'pin';
 oparent.appendChild(opin);
 var obox = document.createElement('div');
 obox.className = 'box';
 opin.appendChild(obox);
 var oimg = document.createElement('img');
 oimg.src = './images/' +dataint.data[i].src;
 obox.appendChild(oimg);
 waterfall('main','pin');

var oparent = document.getElementById(parent); var apin = getclassobj(oparent,pin);//获取id为oparent的类名为pin的元素 var ipinw = apin[0].offsetWidth; var num = Math.floor(document.documentElement.clientWidth/ipinw); oparent.style.cssText = 'width:' + ipinw*num + 'px;margin:0 auto;'; var pinharr = []; for( var i = 0;i apin.length; i++) var pinh = apin[i].offsetHeight; if (i num) { pinharr[i] = pinh; else{ var minh = Math.min.apply(null,pinharr); var minhindex = getminhindex(pinharr,minh); apin[i].style.position = 'absolute'; apin[i].style.top = minh +'px'; apin[i].style.left = apin[minhindex].offsetLeft + 'px'; pinharr[minhindex] += apin[i].offsetHeight; //获取id为parent的类名为classname的元素 function getclassobj(parent,classname){ var obj = parent.getElementsByTagName('*'); var pins = []; for (var i = 0; i obj.length; i++) { if (obj[i].className == classname) { pins.push(obj[i]); return pins; function getminhindex(arr,minh){ for(var i in arr){ if (arr[i] == minh) { return i; function checkscrollside(){ var oparent = document.getElementById('main'); var apin = getclassobj(oparent,'pin'); var lastpinh = apin[apin.length - 1].offsetTop + Math.floor(apin[apin.length - 1].offsetHeight/2); var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var documenth = document.documentElement.clientHeight; return(lastpinh scrollTop + documenth) true:false; /script /body div id="main" div div img src="images/0.jpg" /div /div div div img src="images/1.jpg" /div /div div div img src="images/2.jpg" /div /div div div img src="images/3.jpg" /div /div div div img src="images/4.jpg" /div /div div div img src="images/5.jpg" /div /div div div img src="images/6.jpg" /div /div div div img src="images/7.jpg" /div /div div div img src="images/8.jpg" /div /div div div img src="images/9.jpg" /div /div div div img src="images/10.jpg" /div /div div div img src="images/11.jpg" /div /div div div img src="images/12.jpg" /div /div div div img src="images/13.jpg" /div /div div div img src="images/14.jpg" /div /div div div img src="images/15.jpg" /div /div div div img src="images/16.jpg" /div /div div div img src="images/17.jpg" /div /div div div img src="images/18.jpg" /div /div div div img src="images/19.jpg" /div /div div div img src="images/20.jpg" /div /div div div img src="images/21.jpg" /div /div /div /html

2、思路分析

首先做出静态布局来。先计算出一行放多少个元素,然后再让下一个元素放入第二行中,然后我们要计算出,放入第二行的第一个元素要放在哪个位置,故我们应该有一个数组用来存放每列的高度,当静态的这些元素都放进去之后,可以更加完善,比如当拖动滚动条的时候,页面刷新,更多元素填充,这里要用到json。

3、实现过程

1.初始的静态页面通过css来实现

2.静态的瀑布流布局,先要获取到父级对象main下面的所有类为pin的元素,然后计算一行中有几个块,此时用当前屏幕的宽度去除一个块的宽度,得到num。然后用一个数组,用来存储一行中每列的高度,通过循环,找出最小的高度,以及最小高度的下标值,然后用绝对定位设置高度。

3.当鼠标滚动的时候,通过一个函数来检查是否需要加载新的图片元素,这里用一个变量lastpinh计算出最后一个元素距离顶部的高度和自身高度的一半之和,当页面的高度与滚动出去的高度之和大于最后一个的高度时,触发事件,添加新的元素,以及调整布局。

4、需要掌握知识点:

json的数据存储

window.onscroll();
document.createElement();
obj.className;
obj.appendChild(obj1);
obj.offsetWidth/offsetHeight/offsetLeft/offsetTop;
document.documentElement.clientWidth/clientHeight;
obj.style.cssText
Math.min.apply();
Math.floor();
obj.push();
document.documentElement.scrollTop
document.body.scrollTop;

注:这些都是我所不熟练的知识点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服