关闭边栏(ESC)打开边栏(ESC)
前些天小宇提醒了一下，他打算弄一个瀑布流的布局，问了我有没有css直接解决的方法，刚开始我就想到好像flex布局可以，不过亲手测试了一下，现实的瀑布流效果不是我原始想的那样，看了小宇网站才想起是这种布局。原来我还没有去弄过这些，于是决定亲自试下。刚开始搜了下CSS的方法，确实也能达到效果，只是排序不能从左到右排，而是从上到下了。实例作了，不满意便删除了，考虑用插件。过程中的一些问题记录下
纯CSS布局，直接粘网上搜的结果，自己写的实例删除了
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*大层*/ .container{width:80%;margin: 0 auto;} /*瀑布流层*/ .waterfall{ -moz-column-count:4; /* Firefox */ -webkit-column-count:4; /* Safari 和 Chrome */ column-count:4; -moz-column-gap: 1em; -webkit-column-gap: 1em; column-gap: 1em; } /*一个内容层*/ .item{ padding: 1em; margin: 0 0 1em 0; -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ border: 1px solid #000; } .item img{ width: 100%; margin-bottom:10px; } |
注意break-inside那里，要写齐那几种格式，不然有些浏览器无法显示的。刚开始也是这里卡住。效果如下：
使用masonry插件实现瀑布流
|
1 2 |
//这是官网的js <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> |
html结构
|
1 2 3 4 5 6 |
<div class="grid"> <div class="grid-item">...</div> <div class="grid-item grid-item--width2">...</div> <div class="grid-item">...</div> ... </div> |
相关js
|
1 2 3 4 5 |
$('.grid').masonry({ // options itemSelector: '.grid-item', columnWidth: 200 }); |
相关CSS
|
1 2 |
.grid-item { width: 200px; } .grid-item--width2 { width: 400px; } |
用插件是挺简单的，经过以上的设置基本上就能成功显示了。更多实例与方法可以参考官网的文档，部分效果如下：
以下是使用插件的一些小结
做实例时，有这样的想法，鼠标经过卡片时，显示另一种样式，这是jq里其中的一种写法：
|
1 2 3 4 5 6 7 8 9 10 |
//元素绑定鼠标经过与离开的动作： $('.nicecard').on( 'mouseover mouseout', '.nicecard-item', function(event) { if(event.type == "mouseover"){ $(this).addClass('gigante'); $('.nicecard').masonry('layout') }else if(event.type == "mouseout"){ $(this).removeClass('gigante'); $('.nicecard').masonry('layout'); } }) |
如本站的实例，右上角有个序号的，方便浏览使用，jq里的自动编号
|
1 2 3 4 5 6 7 8 |
//为元素集合编号： function nicecardI(){ if($('.nicecard-item').length>0){ $('.nicecard-item').each(function(i){ $(this).find('.nicecard-i').text(i+1) }) } } |
瀑布流的翻页，如果不用AJAX确实问题少好多，但浏览效果不好，本站用的是AJAX加载的，这个处理起来进了好多次坑呀，因为没看官方的文档，一直测试加载布局都是乱的。原来文档里有提到AJAX加载的。
|
1 2 3 4 |
//ajax加载后瀑布流更新： var $content = $(result); $('.nicecard').append( $content ).masonry( 'appended', $content ); //其中把append改为prepend可以在前面添加 |
AJAX加载的效果：
昨晚一直在弄一个纯图片的瀑布流，做起来才发现，好难实现呀AJAX加载呀，因为图片我不想设定高度，让它自适应，这样瀑布流出来的效果高低不同才好看，只是AJAX加载时，用这个插件就无法做好，暂时没想到办法。要用AJAX加载的，一般都是有内容撑开盒子，不然就乱了。
修改：
刚刚再次看了文档了，发现对于图片的处理，是要加载一个js:imagesLoaded,这样子在ajax加载时，就能解决之前的布局混乱的问题。
|
1 2 3 4 5 6 7 8 |
/ init Masonry var $grid = $('.grid').masonry({ // options... }); // layout Masonry after each image loads $grid.imagesLoaded().progress( function() { $grid.masonry('layout'); }); |
wordpress自带有这个瀑布流的插件，只是版本不是最新的，一定要下载最新的，不然下面这个排序的属性不起作用
|
1 |
horizontalOrder: true |
|
1 2 |
// default, items have no horizontal order // horizontalOrder: false |
这二种结果是不是同的，如果要从左到右再重新从左到右的话，就要设：horizontalOrder: true。特别注意masonry.js的版本
大哥，我想请教一下，你的瀑布流方向，文章的时间降序，是在瀑布流的从左到右的，还是从上到下的啊？我看不出来~~ 我做了一个css的，只能实现从上到下的~
用CSS做的话，我目前只能做到从左到右，所以改用了JS来做，才能做到目前这个效果
改的变漂亮了，不偏向于CMS，更加个性化了
这些天改了好多 有点迷失方向了
这是我见过的最有价值的博客，视觉效果一个字：爽！
感谢夸奖
这是一个老牌插件，哈哈，用JS的话基本上就是这个思路。另外还有一个Isotope也比较知名，但我还没有测试过。
哇，你介绍的Isotope,我刚看了下，比我现在用的这个更多参数可以设置，感谢分享，又多学了一个
原来wordpress的js库中自动的
其实CSS里也有为项目编号的：
还有一点要注意，引用官方JS时，一定要4.2以上的， horizontalOrder: true这个属性才有效，因为wordpress自带的JS库中也有这个插件的js，不过版本是：3.3.2，这也是曾经在瀑布流排序时遇到的一个坑呀