瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）（瀑布流 css）

25-01-23 26

如果您想了解瀑布流的布局原理分析的相关知识，那么本文是一篇不可错过的文章，我们将对纯CSS瀑布流与JS瀑布流进行全面详尽的解释，并且为您提供关于AJAX实现瀑布流触发分页与分页触发瀑布流的方法、blo

如果您想了解瀑布流的布局原理分析的相关知识，那么本文是一篇不可错过的文章，我们将对纯CSS瀑布流与JS瀑布流进行全面详尽的解释，并且为您提供关于AJAX实现瀑布流触发分页与分页触发瀑布流的方法、blocksit-js瀑布流无限加载。示例、css+js瀑布流内容高度自适应、CSS3 实现瀑布流布局的有价值的信息。

本文目录一览：

瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）（瀑布流 css）
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
blocksit-js瀑布流无限加载。示例
css+js瀑布流内容高度自适应
CSS3 实现瀑布流布局

瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）（瀑布流 css）

瀑布流

又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

为什么使用瀑布流

瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！

瀑布流的特点

其实瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。

瀑布流的代码实现

1.纯 css 瀑布流：（ multi-columns 方法）

// 这里是第一次接触到 column-columns 这个属性，这是一个可以设置将div元素中的文本分成几列

//默认值是：auto

//写法：

column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */

/* 注意：IE9及更早 IE 版本浏览器不支持 column-count 属性 */

//这里还会用到另一个属性 column-gap，用来调整边距，实现瀑布流布局

html结构代码如下：

<div class="demo-1"> 
    <div class="item"> 
        <div class="item_content content-lar" style="height:100px;" > 1</div> 
    </div> 
    <div class="item"> 
        <div class="item_content content-sma"style="height:150px;" > 2</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-mid"style="height:50px;" > 3</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-sma" style="height:200px;" > 4</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-mid"style="height:60px;" > 5 </div> 
    </div>
    <div class="item"> 
        <div class="item_content content-lar"style="height:90px;" > 6</div> 
    </div> 
    <div class="item"> 
        <div class="item_content content-sma"> 7</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-lar"style="height:120px;" > 8</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-lar"> 9</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-sma" style="height:100px;" > 10 </div> 
    </div>
    <div class="item"> 
        <div class="item_content content-mid"> 11 </div> 
    </div>
    <div class="item"> 
        <div class="item_content content-mid"style="height:100px;" > 12</div> 
    </div>
    <!-- more items --> 
</div>

css代码如下：

.demo-1{ 
       -moz-column-count:3; /* Firefox */
       -webkit-column-count:3; /* Safari 和 Chrome */
       column-count:3;
       -moz-column-gap: 1em;
       -webkit-column-gap: 1em;
       column-gap: 1em;
       width: 80%;
       margin:0 auto;
    }
    .item { 
        padding: 2em;
        margin-bottom: 2em;
        -webkit-column-break-inside: avoid;
        break-inside: avoid; /*防止断点*/
        background: #ccc;
        text-align: center;
    }

效果图：

这里有个弊端，这并不符合瀑布流的原理，如果使用纯css写瀑布流，则每一块都是从上往下排列，不能做到从左到右排列，并且不会识别哪一块图片放在哪个地方合适，若是再配合动态加载，效果会特别不好，所以只能通过js来实现瀑布流。

那么这里用图片来分析一下我们想要的瀑布流是什么样的。

瀑布流的位置分析图解

如下方图片。假设一排放5张图片。当第一排排满足够多的等宽图片时，显示的是这样的。那么假如我们要放第6张图片的时候，应该放在什么位置呢？

如果按照我们的正常逻辑来想，应该是放在第一张图片下面，依次水平排列过去（如下图）

但现实并非如此！在瀑布流中，从第2行开始，接下去的每一张图片都会放在上行中高度最低的那一列图片下方。（如下图）

为什么呢？因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。

那么如果再继续放置下去，第七张图片应该放在第三列图片下方，以此类推。

所以每次加载图片时，会需要判断哪一列的图片累计的高度最小，那么下一张图片就放在哪一列，即瀑布流算法去判断图片的确定位置。

js代码实现

实现思路：

　　设定每一列图片的宽度和间距
　　获取当前窗口的总宽度，从而根据图片宽度去旁段分成几列
　　获取所有图片元素，定义一个空数组来保存高度
　　遍历所有容器，开始判断　　当页面加载完成，或页面宽度发生变化时，调用函数。
- 如果当前处于第一行时：直接设置图片位置【即 top为间距的大小，left为（当前图片的宽度+间距） * 当前图片的值+间距大小】，并保存当前元素高度。
- 如果当前不处于第一行时：进行高度对比，通过遍历循环，拿到最小高度和相对应的索引，设置图片位置【即 top为最小高度值+间距*2，left为（当前图片的宽度+间距） * 索引值+间距大小）】，并修改当前索引的高度为当前元素高度。
　　当页面加载完成，或页面宽度发生变化时，调用函数。

广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com

代码实现

<script type="text/JavaScript">
    // 定义瀑布流算法函数
    function fall() {
        const minGap = 20; // 最小间距，让每一列的最小空隙可以自定义，避免太过拥挤的情况发生。但是，会通过计算得到真实的间距。
        const itemWidth = 300; // 每一项的宽度，即当前每一个图片容器的宽度。保证每一列都是等宽不等高的。
        const scrollBarWidth = getScrollbarWidth();    // 获取滚动条的宽度
        const pageWidth = window.innerWidth - scrollBarWidth; // 获取当前页面的宽度 = window.innerWidth - 滚动条的宽度
        const column = Math.floor(pageWidth / (itemWidth + minGap)); // 实际列数=页面宽度/(图片宽度+最小间距)
        const gap = (pageWidth - itemWidth * column) / column/2; // 计算真实间距 = (页面宽度- 图片宽度*实际列数)/实际列数/2
        const items = document.querySelectorAll(''img''); // 获取所有的外层元素
        const heightArr = []; // 定义一个空数组，保存最低高度。
        
        // 获取滚动条的宽度
        function getScrollbarWidth() {
            const oDiv = document.createElement(''div'');//创建一个div
            // 给div设置样式。随便定义宽高，只要能获取到滚动条就可以
            oDiv.style.csstext = `width: 50px;height: 50px;overflowY: scroll;` 
            document.body.appendChild(oDiv);//把div添加到body中
            const scrollbarWidth = oDiv.offsetWidth - oDiv.clientWidth;// 使最大宽度和可视宽度相减，获得到滚动条宽度。
            oDiv.remove();//移除创建的div
            return scrollbarWidth;//返回滚动条宽度
        }
        
        
        for (let i = 0; i < items.length; i++) {
            // 遍历所有的外层容器
            const height = items[i].offsetHeight;
            // 如果当前处在第一行
            if (i < column) {
                // 直接设置元素距离上部的位置和距离左边的距离。
                items[i].style.csstext = `top: ${gap}px;left: ${(itemWidth + gap) * i + gap}px`;
                // 保存当前元素的高度。
                heightArr.push(height);
            } else {
                // 不是第一行的话，就进行比对。
                let minHeight = heightArr[0]; // 先保存第一项的高度
                let minIndex = 0; // 保存第一项的索引值
                for (let j = 0; j < heightArr.length; j++) {
                    // 通过循环遍历比对，拿到最小值和最小值的索引。
                    if (minHeight > heightArr[j]) {
                        minHeight = heightArr[j];
                        minIndex = j;
                    }
                }
                // 通过最小值为当前元素设置top值，通过索引为当前元素设置left值。
                items[i].style.csstext = `top: ${minHeight + gap *2}px; left: ${(itemWidth + gap) * minIndex + gap}px`;
                // 并修改当前索引的高度为当前元素的高度
                heightArr[minIndex] = minHeight + gap + height;
            }
        }
    }
    // 页面加载完成调用一次。
    window.onload = fall;
    // 页面尺寸发生改变再次调用。
    window.onresize = fall;
</script>

最终效果图：

总结瀑布流布局原理

设置图片宽度一致
根据浏览器宽度以及每列宽度计算出列表个数，列表默认0
当图片加载完成，所有图片依次放置在最小的列数下面
父容器高度取列表数组的最大值

引申知识点

let，const以及var三者的区别
滚动加载图片（懒加载原理）
反撇号（`）基础知识
style和style.csstest 的区别

总结

以上是小编为你收集整理的瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

AJAX实现瀑布流触发分页与分页触发瀑布流的方法

所谓的瀑布流效果就正如轻图床首页效果那样，多个内容相近的栏目紧密排列，尽量使到栏目间的间隙最小（即流体布局），并且随着页面滚动条向下滚动，新的数据会追加至当前页面的尾部直到所有数据加载完毕（滚动触发的 Ajax 翻页）。

瀑布流触发分页

这里说一下思路，虽然下面的实例中不能全都用到：
1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。
2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。
3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击再显示内容。

var intf_url="http://jb51.net/intf";
var pathUrl = "http://jb51.net/";
var page=1;
var isLoadRB=false; 
var ul_select=$("#fansList");
var btn_more=$("#loading");
if(ul_select.length <1) return ;
var is_more =true;
//跨域请求接口
function loadjs(src,callback){
 var js= document.createElement(''script'');
 js.src = src;
 js.onreadystatechange = js.onload =function(){
 if(!js.readyState || js.readyState==''loaded''
  || js.readyState==''complete''){
  if(callback){callback()||callback};
 }
};
js.charset="utf-8";
document.getElementsByTagName(''head'')[0].appendChild(js);
}
//回调函数
function fill(data){
if(data.pageCount==data.pageNo){
 is_more=false;//如果数据全部加载完毕，取消加载
    $("#loading").html("加载完毕");
}
}
//解析接口
function queryIntf(){
var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";
loadJs(url,callback);
}
function callback(){
page++;
}
/*判断是否要加载接口*/
function needtoloadRB(){
 var btn_top=btn_more.offset().top;
 var window_height=$(window).height();
 var scroll_Top=$(window).scrollTop();
 return btn_top<scroll_Top+window_height?true:false;
}
$(window).scroll(function(){
 var _needload=needtoloadRB();
 if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();}
})
window.onload = function(){
 queryintf(); 
}

以上就是比较简单的随着下拉内容不断加载的思路代码。

JSON格式类似于（如果是动态接口，可以通过callback函数，则这里不用加fill()）：

fill({"fans":[{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20
});

原来静态也可以做接口回调。通过静态处理，则大大缓解了服务器压力和加速生成内容，是大流量网站必备的处理方式。

jQuery的ajax方法实现分页触发瀑布流

1.通过 Ajax 的方式获取下一页的内容
我们需要网页中具有如下 HTML 结构的导航， next_link 为下一页的 url。

<div id="page_nav">
  <a href="next_link">下一页</a>
</div>

相应的 css

#page_nav {clear: both; text-align: center; }

以下这段代码为通过 Ajax 的方式获取下一页的内容，并追加到当前内容的末尾。

nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
  // 判断窗口的滚动条是否接近页面底部
  if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
    // 判断下一页链接是否为空
    if( nextHref != undefined ) {
      // Ajax 翻页
      $.ajax( {
        url: $("#page_nav a").attr("href"),
        type: "POST",
        success: function(data) {
          result = $(data).find("#thumbs .imgbox");
          nextHref = $(data).find("#page_nav a").attr("href");
          $("#page_nav a").attr("href", nextHref);
          $("#thumbs").append(result);
        }
      });
    } else {
      $("#page_nav").remove();
    }
  }
});

2.对追加的内容进行流体布局
熟悉 jQuery 的童鞋应该会了解 js 对于通过 Ajax 方式插入到页面中的元素并不起作用，但在这里并不需要作出如使用 live() 等处理，因为 Masonry 已经在内部作出类似的处理并且默认起效，因此只需在 Ajax 成功执行后的回调函数中调用 masonry() 方法即可。

$newElems = $result;
$newElems.imagesLoaded(function(){
  $container.masonry( ''appended'', $newElems, true );
});

3.对 Ajax 翻页过程作出修饰
在上面的过程中已经有完整的瀑布流布局，但是翻页过程中并没有任何提示，而且直接插入多张图片可能会影响用户体验，因此需要对翻页过程作出一些修饰，下面给出完整代码。
这里需要增加一个如下的元素，用于提示正在加载新内容或提示已到了最后一页。

<div id="page_loading">
  <span>给力加载中……</span>
</div>

相应的 css

复制代码代码如下:

#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px; padding: 10px; position: absolute; bottom: -50px; left: 330px; }

下面是完整的 Ajax 翻页代码

nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
  // 判断窗口的滚动条是否接近页面底部
  if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
    // 判断下一页链接是否为空
    if( nextHref != undefined ) {
      // 显示正在加载模块
      $("#page_loading").show("slow");
      // Ajax 翻页
      $.ajax( {
        url: $("#page_nav a").attr("href"),
        type: "POST",
        success: function(data) {
          result = $(data).find("#thumbs .imgbox");
          nextHref = $(data).find("#page_nav a").attr("href");
          $("#page_nav a").attr("href", nextHref);
          $("#thumbs").append(result);
          // 把新的内容设置为透明
          $newElems = result.css({ opacity: 0 });
          $newElems.imagesLoaded(function(){
            $container.masonry( ''appended'', $newElems, true );
            // 渐显新的内容
            $newElems.animate({ opacity: 1 });
            // 隐藏正在加载模块
            $("#page_loading").hide("slow");              
          });
 
        }
      });
    } else {
      $("#page_loading span").text("木有了噢，最后一页了！");
      $("#page_loading").show("fast");
      setTimeout("$(''#page_loading'').hide()",1000);
      setTimeout("$(''#page_loading'').remove()",1100);
    }
  }
});

您可能感兴趣的文章:

PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
纯js实现瀑布流布局及ajax动态新增数据
PHP结合Jquery和ajax实现瀑布流特效
jQuery 瀑布流绝对定位布局（二）(延迟AJAX加载图片)
jQuery 瀑布流浮动布局（一）(延迟AJAX加载图片)
深入学习js瀑布流布局
javascript瀑布流式图片懒加载实例
javascript瀑布流布局实现方法详解
AJAX实现瀑布流布局

blocksit-js瀑布流无限加载。示例

<!DOCTYPE html>
<html>
<head>
<title>BlocksIt.js Demonstration #2 - Pinterest Dynamic Grid Layout with CSS3 Transitions</title>
<meta name="description" content="BlocksIt.js jQuery plugin Demonstration #2 Pinterest dynamic grid with CSS3 Transitions by inWebson.com"/>
<meta name="keywords" content="demonstration,demo,jquery,blocksit.js,css3,dynamic,grid,layout,inwebson"/>
<link rel=''stylesheet'' href=''style.css'' media=''screen'' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="../blocksit.min.js"></script>
<script>
$(document).ready(function() {
//vendor script
$(''#header'')
.css({ ''top'':-50 })
.delay(1000)
.animate({''top'': 0}, 800);

$(''#footer'')
.css({ ''bottom'':-15 })
.delay(1000)
.animate({''bottom'': 0}, 800);

//blocksit define
$(window).load( function() {
$(''#container'').BlocksIt({
numOfCol: 5,
offsetX: 8,
offsetY: 8,
blockElement:''.grid''
});
});

//window resize
var currentWidth = 1100;
$(window).resize(function() {
var winWidth = $(window).width();
var conWidth;
if(winWidth < 660) {
conWidth = 440;
col = 2
} else if(winWidth < 880) {
conWidth = 660;
col = 3
} else if(winWidth < 1100) {
conWidth = 880;
col = 4;
} else {
conWidth = 1100;
col = 5;
}

if(conWidth != currentWidth) {
currentWidth = conWidth;
$(''#container'').width(conWidth);
$(''#container'').BlocksIt({
numOfCol: col,
offsetX: 8,
offsetY: 8,
blockElement:''.grid''
});
}
});

$(window).scroll(function(){
var clientHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
scrollHeight = $(document).height();
if(clientHeight + scrollTop >= scrollHeight ){
var v = $("<divgrid''><divimgholder''><img src=''http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg'' /></div><strong>Sunset Lake</strong><p>A peaceful sunset view...</p><divmeta''>by j osborn</div></div>");
$("#container").append(v).BlocksIt(''reload'');
}
});
});
</script>
</head>
<body>
<div id="container">
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg" />
</div>
<strong>Sunset Lake</strong>
<p>A peaceful sunset view...</p>
<div>by j osborn</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img26.jpg" />
</div>
<strong>Bridge to Heaven</strong>
<p>Where is the bridge lead to?</p>
<div>by SigitEko</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img15.jpg" />
</div>
<strong>Autumn</strong>
<p>The fall of the tree...</p>
<div>by Lars van de Goor</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img23.jpg" />
</div>
<strong>Winter Whisper</strong>
<p>Winter feel...</p>
<div>by Andrea Andrade</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img17.jpg" />
</div>
<strong>Light</strong>
<p>The only shinning light...</p>
<div>by Lars van de Goor</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img22.jpg" />
</div>
<strong>Rooster''s Ranch</strong>
<p>Rooster''s ranch landscape...</p>
<div>by Andrea Andrade</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img16.jpg" />
</div>
<strong>Autumn Light</strong>
<p>Sun shinning into forest...</p>
<div>by Lars van de Goor</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img21.jpg" />
</div>
<strong>Yellow cloudy</strong>
<p>It is yellow cloudy...</p>
<div>by Zsolt Zsigmond</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img28.jpg" />
</div>
<strong>Herringfleet Mill</strong>
<p>Just a herringfleet mill...</p>
<div>by Ian Flindt</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img2.jpg" />
</div>
<strong>Battle Field</strong>
<p>Battle Field for you...</p>
<div>by Andrea Andrade</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img24.jpg" />
</div>
<strong>Sundays Sunset</strong>
<p>Beach view sunset...</p>
<div>by Robert Strachan</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img19.jpg" />
</div>
<strong>Sun Flower</strong>
<p>Good Morning Sun flower...</p>
<div>by Zsolt Zsigmond</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img5.jpg" />
</div>
<strong>Beach</strong>
<p>Something on beach...</p>
<div>by unknown</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img25.jpg" />
</div>
<strong>Flowers</strong>
<p>Hello flowers...</p>
<div>by R A Stanley</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img20.jpg" />
</div>
<strong>Alone</strong>
<p>Lonely plant...</p>
<div>by Zsolt Zsigmond</div>
</div> 
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img20.jpg" />
</div>
<strong>Alone</strong>
<p>Lonely plant...</p>
<div>by Zsolt Zsigmond</div>
</div>
</div>
</body>
</html>

---------------------------------------------------------分割线---------------------------------------------------

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP ''test2.jsp'' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/blocksit.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
alert("this");

//vendor script
$("#header")
.css({ "top":-50 })
.delay(1000)
.animate({"top": 0}, 800);

$("#footer")
.css({ "bottom":-15 })
.delay(1000)
.animate({"bottom": 0}, 800);

//blocksit define
$(window).load( function() {
$(''#container'').BlocksIt({
numOfCol: 5,
offsetX: 8,
offsetY: 8,
blockElement : ".grid"
});
});

//window resize
var currentWidth = 1100;
$(window).resize(function() {
var winWidth = $(window).width();
var conWidth;
if(winWidth < 660) {
conWidth = 440;
col = 2;
} else if(winWidth < 880) {
conWidth = 660;
col = 3;
} else if(winWidth < 1100) {
conWidth = 880;
col = 4;
} else {
conWidth = 1100;
col = 5;
}

if(conWidth != currentWidth) {
currentWidth = conWidth;
$("#container").width(conWidth);
$("#container").BlocksIt({
numOfCol: col,
offsetX: 8,
offsetY: 8,
blockElement : ".grid"
});
}
});
});
</script>
</head>
<body>
<div align="center">
</div>

<div id="container">
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg" />
</div>
<strong>Sunset Lake</strong>
<p>A peaceful sunset view...</p>
<div>by j osborn</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img26.jpg" />
</div>
<strong>Bridge to Heaven</strong>
<p>Where is the bridge lead to?</p>
<div>by SigitEko</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img15.jpg" />
</div>
<strong>Autumn</strong>
<p>The fall of the tree...</p>
<div>by Lars van de Goor</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img23.jpg" />
</div>
<strong>Winter Whisper</strong>
<p>Winter feel...</p>
<div>by Andrea Andrade</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img17.jpg" />
</div>
<strong>Light</strong>
<p>The only shinning light...</p>
<div>by Lars van de Goor</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img22.jpg" />
</div>
<strong>Rooster''s Ranch</strong>
<p>Rooster''s ranch landscape...</p>
<div>by Andrea Andrade</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img16.jpg" />
</div>
<strong>Autumn Light</strong>
<p>Sun shinning into forest...</p>
<div>by Lars van de Goor</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img21.jpg" />
</div>
<strong>Yellow cloudy</strong>
<p>It is yellow cloudy...</p>
<div>by Zsolt Zsigmond</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img28.jpg" />
</div>
<strong>Herringfleet Mill</strong>
<p>Just a herringfleet mill...</p>
<div>by Ian Flindt</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img2.jpg" />
</div>
<strong>Battle Field</strong>
<p>Battle Field for you...</p>
<div>by Andrea Andrade</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img24.jpg" />
</div>
<strong>Sundays Sunset</strong>
<p>Beach view sunset...</p>
<div>by Robert Strachan</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img19.jpg" />
</div>
<strong>Sun Flower</strong>
<p>Good Morning Sun flower...</p>
<div>by Zsolt Zsigmond</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img5.jpg" />
</div>
<strong>Beach</strong>
<p>Something on beach...</p>
<div>by unknown</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img25.jpg" />
</div>
<strong>Flowers</strong>
<p>Hello flowers...</p>
<div>by R A Stanley</div>
</div>
<div>
<div>
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img20.jpg" />
</div>
<strong>Alone</strong>
<p>Lonely plant...</p>
<div>by Zsolt Zsigmond</div>
</div> 
</div>

<div>
<jsp:include page="bottom.jsp"></jsp:include>
</div>
</body>
</html>

css+js瀑布流内容高度自适应

总结

以上是小编为你收集整理的css+js瀑布流内容高度自适应全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

CSS3 实现瀑布流布局

讲干货，不啰嗦，瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过 CSS3 的多列（Multi-column）属性，可以简单的实现类似效果。

具体步骤：

1. 设置外部容器多列列数（column-count）和列间距（column-gap）

2. 设置内容条目的 break-inside 属性为 avoid，使条目总体不被打断。

HTML 结构：

<div class="container"> //最外层容器
    <div class="item">//条目
         <div class="item__content">//条目内容
            <img src=''''>
         </div>
     </div>
     <div class="item">
         <div class="item__content">
              <img src=''''>
         </div> 
     </div>
     <!-- more items --> 
        .........
</div>

css 样式：

.container {
    column-count: 4; //多列的列数
    column-gap: 0;//列间距
 }

.item{
    break-inside: avoid;//避免在主体框中插入任何中断（页面，列或区域）。
}

以上为最核心代码，需要根据具体业务做进一步完善，如添加浏览器前缀，设置元素宽高及位置等等。

关于瀑布流的布局原理分析和纯CSS瀑布流与JS瀑布流的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于AJAX实现瀑布流触发分页与分页触发瀑布流的方法、blocksit-js瀑布流无限加载。示例、css+js瀑布流内容高度自适应、CSS3 实现瀑布流布局等相关知识的信息别忘了在本站进行查找喔。

本文标签：