最近很多小伙伴都在问css3实现瀑布流和css3实现瀑布流这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展AJAX实现瀑布流触发分页与分页触发瀑布流的方法、CSS3--column
最近很多小伙伴都在问css3 实现瀑布流和css3实现瀑布流这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展AJAX实现瀑布流触发分页与分页触发瀑布流的方法、CSS3 -- column 实现瀑布流布局、CSS3 实现瀑布流布局、css3 瀑布流 五等相关知识，下面开始了哦！
本文目录一览：
css3 实现瀑布流（css3实现瀑布流）
掌握点：
1、column-count 把div中的文本分为多少列
2、column-width 规定列宽
3、column-gap 规定列间隙
4、break-inside: avoid; 避免元素内部断行并产生新列
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
/*container 分为两列 间距20px,item元素宽度 344px*/
.container{
}
/**/
.item{
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
float:left;
margin-bottom:30px;
}
<div>
<div></div>
</div>
tip:如果设置元素之间的margin-bottom值就需要设置元素浮动，不然会出现两列元素顶部对不齐的问题
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
所谓的瀑布流效果就正如轻图床首页效果那样，多个内容相近的栏目紧密排列，尽量使到栏目间的间隙最小（即流体布局），并且随着页面滚动条向下滚动，新的数据会追加至当前页面的尾部直到所有数据加载完毕（滚动触发的 ajax 翻页）。
瀑布流触发分页
这里说一下思路，虽然下面的实例中不能全都用到：
1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。
2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。
3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击再显示内容。
var intf_url="http://php.cn/intf";
var pathUrl = "http://php.cn/";
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":"php.cn","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);
}
}
});更多AJAX实现瀑布流触发分页与分页触发瀑布流的方法相关文章请关注PHP中文网！
CSS3 -- column 实现瀑布流布局
本例使用 CSS column 实现瀑布流布局
关键点，column-count: 元素内容将被划分的最佳列数
关键点，break-inside: 避免在元素内部插入分页符
html
div.g-container
-for(var j = 0; j<32; j++)
div.g-item
scss
$count: 32;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
column-count: 4;
column-gap: .5vw;
padding-top: .5vw;
}
.g-item {
position: relative;
width: 24vw;
margin-bottom: 1vw;
break-inside: avoid;
}
@for $i from 1 to $count+1 {
.g-item:nth-child(#{$i}) {
height: #{randomNum(300, 50)}px;
background: randomColor();
&::after {
content: "#{$i}";
position: absolute;
color: #fff;
font-size: 2vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
感谢公总号：web 前端开发
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;//避免在主体框中插入任何中断（页面，列或区域）。
}
以上为最核心代码，需要根据具体业务做进一步完善，如添加浏览器前缀，设置元素宽高及位置等等。
css3 瀑布流 五
body {
background-color: #f6f6f6;
}
.container {
width: 80%;
margin: 0 auto;
}
.waterfall {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-width: 24em;
-webkit-column-width: 24em;
column-width: 24em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
.pin {
padding: 1em;
margin: 0 0.125em 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: white;
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}
.pin img {
width: 100%;
padding-bottom: 1em;
margin-bottom: 0.5em;
border-bottom: 1px solid #cccccc;
}
今天关于css3 实现瀑布流和css3实现瀑布流的介绍到此结束，谢谢您的阅读，有关AJAX实现瀑布流触发分页与分页触发瀑布流的方法、CSS3 -- column 实现瀑布流布局、CSS3 实现瀑布流布局、css3 瀑布流 五等更多相关知识的信息可以在本站进行查询。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
