jQuery+HTML5美女瀑布流布局实现方法

下面是详细的"jQuery+HTML5美女瀑布流布局实现方法"攻略：

概述

瀑布流布局是近年来非常流行的一种网页布局方式，它可以将页面上的数据以瀑布流的方式呈现出来，形式非常美观。本文将介绍如何使用jQuery和HTML5实现一个简单的美女瀑布流布局。

实现步骤

第一步：HTML结构

首先，我们需要构建一个基本的HTML结构，该结构包含"container"、"box"两个基本元素：

<div class="container">
  <div class="box">
    <img src="#">
  </div>
  <div class="box">
    <img src="#">
  </div>
  ...
</div>

其中，每一个.box元素中包含一张图片，这些图片将被排列在container中。

第二步：CSS样式

接下来，我们需要定义一些CSS样式来让这些元素排列起来。下面是一些基础的CSS样式：

.container {
  width: 100%;
  overflow: hidden;
}
.box {
  width: 23%;
  margin: 1%;
  float: left;
  background: #eee;
  position: relative;
}
.box img {
  width: 100%;
  height: auto;
  display: block;
}

以上样式，将所有.box元素按照23%的宽度和1%的margin进行排列。同时，我们需要在.box元素中添加一个相对定位的position属性（position: relative），以便后面进行绝对定位操作。

第三步：实现定位

接下来，我们需要通过jQuery来实现这些.box元素的定位。首先，我们需要获取每一个.box元素，并为其设置绝对定位：

var boxs = $('.box');
var containerWidth = $('.container').width();
var boxWidth = boxs.eq(0).outerWidth();
var cols = Math.floor(containerWidth / boxWidth);

$('.box').each(function(index) {
  if (index < cols) {
    $(this).css({
      'top': 0,
      'left': (boxWidth + 2) * index
    });
  } else {
    var minHeight = Math.min.apply(null, boxHeight);
    var minIndex = $.inArray(minHeight, boxHeight);

    $(this).css({
      'position': 'absolute',
      'top': minHeight + 2,
      'left': boxs.eq(minIndex).position().left
    });

    boxHeight[minIndex] += boxs.eq(index).outerHeight() + 2;
  }
});

以上代码通过计算容器宽度和每个.box元素的宽度，算出一共可以容纳多少列（cols）；针对每一个.box元素，判断它是在第一行，还是在第二行之后。在第一行（index小于cols）的.box元素，直接设置top和left即可；在第二行之后的.box元素，计算出当前列的高度，设置为当前.box元素的top，而left则采用最小高度的列的left属性。

第四步：瀑布流加载更多

最后，我们将实现瀑布流的"加载更多"功能。这需要通过监听scroll事件来实现：

$(window).on('scroll', function() {
  if (checkScrollSlide()) {
    //TODO
  }
});

function checkScrollSlide() {
  var lastBox = $('.box').last();
  var lastBoxDis = lastBox.offset().top + Math.floor(lastBox.outerHeight() / 2);
  var scrollTop = $(window).scrollTop();
  var documentH = $(window).height();

  return (lastBoxDis < scrollTop + documentH) ? true : false;
}

以上代码监听scroll事件，当滚动到距离最后一个.box元素的一半之后，触发加载更多的事件。

示例说明

示例1

下面是一个基于以上攻略实现的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        .container {
            width: 100%;
            overflow: hidden;
        }
        .box {
            width: 23%;
            margin: 1%;
            float: left;
            background: #eee;
            position: relative;
        }
        .box img {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            var boxs = $('.box');
            var containerWidth = $('.container').width();
            var boxWidth = boxs.eq(0).outerWidth();
            var cols = Math.floor(containerWidth / boxWidth);

            var boxHeight = [];
            boxs.each(function(index, value) {
                var boxHeight = boxs.eq(index).outerHeight() + 2;
                if (index < cols) {
                    boxHeight[index] = boxs.eq(index).outerHeight() + 2;
                } else {
                    var minHeight = Math.min.apply(null, boxHeight);
                    var minIndex = $.inArray(minHeight, boxHeight);

                    $(this).css({
                        'position': 'absolute',
                        'top': minHeight + 2,
                        'left': boxs.eq(minIndex).position().left
                    });

                    boxHeight[minIndex] += boxs.eq(index).outerHeight() + 2;
                }
            });

            $(window).on('scroll', function() {
                if (checkScrollSlide()) {
                    $('.container').append($('.box').clone(true, true));
                    $(window).trigger('resize');      // 触发resize事件，重新布局
                }
            });

            function checkScrollSlide() {
                var lastBox = $('.box').last();
                var lastBoxDis = lastBox.offset().top + Math.floor(lastBox.outerHeight() / 2);
                var scrollTop = $(window).scrollTop();
                var documentH = $(window).height();

                return (lastBoxDis < scrollTop + documentH) ? true : false;
            }
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="box"><img src="http://placehold.it/350x350"></div>
        <div class="box"><img src="http://placehold.it/320x450"></div>
        <div class="box"><img src="http://placehold.it/300x300"></div>
        <div class="box"><img src="http://placehold.it/450x450"></div>
        <div class="box"><img src="http://placehold.it/300x300"></div>
        <div class="box"><img src="http://placehold.it/200x450"></div>
        <div class="box"><img src="http://placehold.it/410x280"></div>
        <div class="box"><img src="http://placehold.it/350x350"></div>
        <div class="box"><img src="http://placehold.it/300x300"></div>
        <div class="box"><img src="http://placehold.it/450x450"></div>
        <div class="box"><img src="http://placehold.it/300x300"></div>
    </div>
</body>
</html>

该示例中，我们可以看到一排排排列的图片瀑布流布局。

示例2

下面是一个使用ajax获取数据的示例：


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Ajax瀑布流</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .box{
            position: absolute;
            margin: 15px;
        }
        .box img{
            vertical-align: top;
        }
        #loading{
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -20px;
            width: 40px;
            height: 40px;
            display: none;
            background: url(./images/loading.gif) no-repeat center center;
        }
        #loadMore{
            text-align: center;
            margin: 10px 0;
            padding: 10px;
            background: #ccc;
            color: #fff;
            cursor: pointer;
        }
        #loadMore:hover{
            background: #666;
        }
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="container">
    <div class="box"><a href="#"><img src="./images/1.jpg" alt=""></a></div>
    <div class="box"><a href="#"><img src="./images/2.jpg" alt=""></a></div>
    .......
</div>
<div id="loading"></div>
<div id="loadMore">Load More</div>
<script>
    var pageIndex = 0;
    var imgData = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},{"src":"15.jpg"},{"src":"16.jpg"},{"src":"17.jpg"},{"src":"18.jpg"},{"src":"19.jpg"},{"src":"20.jpg"},{"src":"21.jpg"},{"src":"22.jpg"},{"src":"23.jpg"},{"src":"24.jpg"},{"src":"25.jpg"},{"src":"26.jpg"},{"src":"27.jpg"},{"src":"28.jpg"},{"src":"29.jpg"},{"src":"30.jpg"}]};
    imgLocation();
    // 监听滚动条，新的图片load出来再重新排列图片
    window.onscroll = function(){
        if(checkScrollSlide){
            $("#loading").show();

            $.ajax({
                url: './data/data.json',
                type: 'GET',
                dataType: 'json',
                data: {pageIndex: pageIndex},
            })
            .done(function(data) {
                pageIndex ++;
                $.each(data.data,function(key, value){
                    var oBox = $("<div>").addClass("box").appendTo($("#container"));
                    var oPic = $("<div>").addClass("pic").appendTo($(oBox));
                    $("<img>").attr("src","./images/"+$(value).attr("src")).appendTo($(oPic));
                });
                imgLocation();
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
                $("#loading").hide();
            });
        }
    }
    // 计算出新load图片的位置
    function imgLocation(){
        var box = $(".box");
        var boxW = box.eq(0).width();
        var num = Math.floor($("#container").width()/boxW); 
        var boxArr = []; 
        box.each(function(index,value){
           var boxH = box.eq(index).height(); 
           if (index < num){

               boxArr[index] = boxH;
           }else{
               var minH = Math.min.apply(null, boxArr);  
               console.log(minH);
               var minHIndex = $.inArray(minH, boxArr);
               // console.log(minHIndex);
               $(value).css({
                   "position":"absolute",
                   "top":minH+"px",
                   "left":box.eq(minHIndex).position().left+"px"
               })
               boxArr[minHIndex] += box.eq(index).height();
           }
        });
    }

    function checkScrollSlide(){
        var lastBox = $('.box').last();
        var lastBoxH = lastBox.offset().top + Math.floor(lastBox.height()/2);
        var scrollTop = $(window).scrollTop();
        console.log(lastBoxH,scrollTop,documentH)
        var documentH = $(window).height();
        return (lastBoxH < scrollTop + documentH) ? true : false;
    }
</script>
</body>
</html>

该示例中采用了ajax获取数据，每次滚动至底部时，触发Ajax请求，并渲染新数据至页面上。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery+HTML5美女瀑布流布局实现方法 - Python技术站