jquery设置首页 jquery页面布局

转载

mob64ca1419a401 2023-10-23 11:25:39

文章标签 jquery设置首页 jquery 前端瀑布流 ooc 文章分类 jQuery 前端开发

瀑布流简介

瀑布流——瀑布流式布局
一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

最早采用此布局的网站是Pinterest，逐渐在国内流行开来。
国内大多数清新站基本为这类风格。

应用领域

jquery设置首页 jquery页面布局_前端

jquery设置首页 jquery页面布局_前端_02

布局优点

jquery设置首页 jquery页面布局_前端_03

瀑布流布局的结构和样式

瀑布流基本结构的结构层与表示层
index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>瀑布流—云南十八怪</title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>

    <body>
        <div id="wrap">
            <div>
                <img src="img/2.png">
                <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
            </div>
            <div><img src="img/3.png">
                <a href="http://www.imooc.com">第二怪 草帽当锅盖</a>
            </div>
            <div><img src="img/4.png">
                <a href="http://www.imooc.com">第三怪 这边下雨那边晒</a>
            </div>
            <div><img src="img/5.png">
                <a href="http://www.imooc.com">第四怪 四季服装同穿戴</a>
            </div>
            <div><img src="img/6.png">
                <a href="http://www.imooc.com">第五怪 火车没有汽车快</a>
            </div>
            <div><img src="img/7.png">
                <a href="http://www.imooc.com">第六怪 火车不通国内通国外</a>
            </div>
            <div><img src="img/8.png">
                <a href="http://www.imooc.com">第七怪 老奶爬山比猴快</a>
            </div>
            <div><img src="img/9.png">
                <a href="http://www.imooc.com">第八怪 鞋子后面多一块</a>
            </div>
            <div><img src="img/10.png">
                <a href="http://www.imooc.com">第九怪 脚趾四季漏在外</a>
            </div>
            <div><img src="img/11.png">
                <a href="http://www.imooc.com">第十怪 鸡蛋拴着卖</a>
            </div>
            <div><img src="img/12.png">
                <a href="http://www.imooc.com">第十一怪 粑粑叫饵块</a>
            </div>
            <div><img src="img/13.png">
                <a href="http://www.imooc.com">第十二怪 花生蚕豆数着卖</a>
            </div>
        </div>
    </body>

</html>

index.css

/*All Tag*/
*{
    margin: 0;
    padding: 0;
    border: none;
}

body{
    background: #ddd;
}

img{
    border: none;
}

a{
    text-decoration: none;
    color: #444;
}

a:hover{
    color: #999;
}

/*Wrap*/
#wrap{
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto;
}

#wrap > div {
    float: left;
    box-sizing: border-box;
    width: 280px;
    height: auto;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}

#wrap > div > img {
    width: 100%;
}

#wrap > div > a{
    display: block;/*行级元素改为块级元素*/
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
}

使用js和jq完成定位布局

瀑布流布局
Javascript布局，jQuery布局，布局方式比较

Javascript布局
index.js

function waterfall(wrap, boxes){
    //获取屏幕可以显示的列数
    var boxWidth = boxes[0].offsetWidth +20;
    var  windowWidth =document.documentElement.clientWidth;
    var colsNumber = Math.floor(windowWidth /boxWidth);

    //设置容器的宽度
    wrap.style.width = boxWidth * colsNumber +'px';

    //定义一个数组并存储每一列的高度
    var everyHeight = new Array();
    for (var i = 0;i<boxes.length;i++) {
        if(i<colsNumber){
            everyHeight[i] = boxes[i].offsetHeight + 20;//20为外边距
        }else{
          var minHeight = Math.min.apply(null,everyHeight);
          var minIndex = getIndex(minHeight,everyHeight);
          var leftValue = boxes[minIndex].offsetLeft -10; //10px外边距
          boxes[i].style.position = 'absolute';
          boxes[i].style.top = minHeight +'px';
          boxes[i].style.left = leftValue +'px';
          everyHeight[minIndex]  += boxes[i].offsetHeight+20;
        };
    }
};

//获取最小列的索引
function getIndex(minHeight, everyHeight){
    for(index in everyHeight){
        if(everyHeight[index] == minHeight){
            return index;
        }
    }
}

window.onload = function(){
   var wrap = document.getElementById('wrap');
   var boxes  =wrap.getElementsByTagName('div');
   waterfall(wrap,boxes);
};

jQuery布局

//jQuery方式

var waterfall = function(wrap,boxes){
    //获取屏幕可以显示的列数
    var boxWidth = boxes.eq(0).width() +40;
    var windowWidth = $(window).width();
    var colsNumber = Math.floor(windowWidth /boxWidth);

    //设置容器的宽度
    wrap.width(boxWidth * colsNumber);

    //定义一个数组并存储每一列的高度
    var everyHeight = new Array();
    for (var i = 0;i<boxes.length;i++) {
        if(i < colsNumber){
            everyHeight[i] = boxes.eq(i).height() + 40;
        }else{
            var minHeight = Math.min.apply(null,everyHeight);
            var minIndex = getIndex(minHeight,everyHeight);
            boxes.eq(i).css({
                'position':'absolute',
                'top':minHeight,
                'left': boxes.eq(minIndex).position().left,
                'opacity':'0'
            }).stop().animate({
                'opacity':'1'
            },1000)
            everyHeight[minIndex] += boxes.eq(i).height()+40;
        };
    }
    console.log(boxes.eq(minIndex).position().left);
};

//获取最小列的索引
function getIndex(minHeight, everyHeight){
    for(index in everyHeight){
        if(everyHeight[index] == minHeight){
            return index;
        }
    };
};

$(document).ready(function(event){
    var wrap = $('#wrap');
    var boxes = $('#wrap').children('div');
    waterfall(wrap,boxes);
});

瀑布流追加

追加原理、追加实现、效果优化

//追加盒子函数
var appendBox = function(wrap,boxes){
    wrap.append('<div><img src="img/2.png"><a href="http://www.imooc.com">第一怪 竹筒当烟袋</a> </div>')
}

$(document).ready(function(event){
    var wrap = $('#wrap');
    var boxes = wrap.children('div');
    waterfall(wrap,boxes);

    $(this).scroll(function(event){
        appendBox(wrap,boxes);
    });
});

index.js整体代码

//模拟数据
var data = [{
        "src": "2.png",
        "title": "第一怪 竹筒当烟袋"
    },
    {
        "src": "3.png",
        "title": "第二怪 竹筒当烟袋"
    },
    {
        "src": "4.png",
        "title": "第三怪 竹筒当烟袋"
    },
    {
        "src": "5.png",
        "title": "第四怪 竹筒当烟袋"
    },
    {
        "src": "6.png",
        "title": "第五怪 竹筒当烟袋"
    },
    {
        "src": "7.png",
        "title": "第六怪 竹筒当烟袋"
    },
    {
        "src": "8.png",
        "title": "第七怪 竹筒当烟袋"
    },
    {
        "src": "9.png",
        "title": "第八怪 竹筒当烟袋"
    },
    {
        "src": "10.png",
        "title": "第九怪 竹筒当烟袋"
    },
    {
        "src": "11.png",
        "title": "第十怪 竹筒当烟袋"
    },
    {
        "src": "12.png",
        "title": "第十一怪 竹筒当烟袋"
    }
];

//jQuery方式

var waterfall = function(wrap, boxes) {
    //获取屏幕可以显示的列数
    var boxWidth = boxes.eq(0).width() + 40;
    var windowWidth = $(window).width();
    var colsNumber = Math.floor(windowWidth/boxWidth);
    //设置容器的宽度
    wrap.width(boxWidth * colsNumber);

    //定义一个数组并存储每一列的高度
    var everyHeight = new Array();//定义一个数据存储每一列的高度
    for(var i = 0; i < boxes.length; i++) {
        if(i < colsNumber) {
            everyHeight[i] = boxes.eq(i).height() + 40;
        } else {
            //获取最小列的高度
            var minHeight = Math.min.apply(null, everyHeight);
            //获取最小列的索引
            var minIndex = getIndex(minHeight, everyHeight);
            var leftValue = boxes.eq(minIndex).position().left;
            //设置盒子样式
            setStyle(boxes.eq(i), minHeight, leftValue, i);
            //更新最小列的高度
            everyHeight[minIndex] += boxes.eq(i).height() + 40;
        };
        //鼠标经过呈现半透明的交互效果
        boxes.eq(i).hover(function(event){
               $(this).stop().animate({
                'opacity':'0.5'
               },500);
        },function(event){
              $(this).stop().animate({
                'opacity':'1'
              },1000);
        });
    }
};

//获取最小列的索引
function getIndex(minHeight, everyHeight) {
    for(index in everyHeight) {
        if(everyHeight[index] == minHeight) {
            return index;
        }
    };
};

//设置追加盒子的样式
var getStartNumber = 0;
var setStyle = function(box, top, left, index) {
    if(getStartNumber >= index) {
        return false;
    };
    box.css({
        'position': 'absolute',
        'top': top,
        'left': left,
        'opacity': '0'
    }).stop().animate({
        'opacity': '1'
    }, 1000);
    getStartNumber = index;
};

//追加条件：最后一个盒子的top值+其高度<document高度值+滚动条滚动的值
//数据请求检验
var getCheck = function(wrap) {
    //获取文档高度
    var docunmentHeight = $(window).height();
    //获取文档向上滚动的高度
    var scrollHeight = $(window).scrollTop();
    //获取最后一个盒子所在列的总高度

    var boxes =wrap.children('div');
    var lastBoxTop = boxes.eq(boxes.length - 1).offset().top;
    var lastHeight = boxes.eq(boxes.length - 1).height() + 20;
    var lastColHeight = lastBoxTop + lastHeight;
    return docunmentHeight + scrollHeight >= lastColHeight ? true : false;
};

//追加盒子函数
var appendBox = function(wrap) {
    if(getCheck(wrap)) {
        for(i in data) {
            var innerString = '<div><img src="img/' + data[i].src + '"><a href="http://www.imooc.com">' + data[i].title + '</a></div>';
            wrap.append(innerString);
        };
    }else{
      return false; 
    };
    waterfall(wrap, wrap.children('div'));
}

$(document).ready(function(event) {
    //获取容器与盒子
    var wrap = $('#wrap');
    var boxes = wrap.children('div');
    //加载盒子
    waterfall(wrap, boxes);
    //滚动事件
    $(this).scroll(function(event) {
        appendBox(wrap, boxes);
    });
});

整体代码示例：

链接: https://pan.baidu.com/s/1ghfDKoN 密码: gu24

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。