折腾几天,终于做了个简单的无插件的瀑布流效果
直接上代码,可以实际使用。有需要的拿去参考。手机竖屏显示2列,横屏显示3列。电脑根据浏览器大小显示2-4列,具体列数可根据浏览器大小调整。
图片是效果截图。图片资料自己准备
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
.parent1 {
width:100%;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.child1 {
margin-bottom:20px;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
color:#0f0; }
</style>
<script>
var x=0;
var heng=heng_flag();
var mobile_flag = isMobile();
$(document).ready(function(){
var x=document.documentElement.clientWidth||document.body.clientWidth;
heng=heng_flag();
x=$(".aacc").width();
buju(x);
//监听横竖屏
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt,resize,false);
function resize(fals) {
heng=heng_flag();
}
resize(true);
$(window).resize(function(){
x=document.documentElement.clientWidth||document.body.clientWidth;
x=$(".aacc").width();
buju(x);
});
});
function buju(w){
var c=0;
var w_c=0;
if(heng){
//alert("heng1 "+heng);
if(w>1400){
c=4;
w_c=4.15;
}else if(w>800){
c=3;
w_c=3.15;
}else{
c=2;
w_c=2.1;
}
if(mobile_flag){
c=4;
w_c=4.15;
}
}else{
c=2;
w_c=2.1;
}
$(".parent1").css("column-count",c);
$(".parent1").css("-moz-column-count",c);
$(".parent1").css("-webkit-column-count",c);
$(".child1 img").width(w/w_c);
}
function heng_flag() {
if(window.orientation == 0 || window.orientation == 180) {
return false;
}else {
return true;
}
}
function isMobile() {
var userAgentInfo = navigator.userAgent;
var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
var mobile_flag = false;
//根据userAgent判断是否是手机
for (var v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
var screen_width = window.screen.width;
var screen_height = window.screen.height;
//根据屏幕分辨率判断是否是手机
if(screen_width < 500 && screen_height < 800){
mobile_flag = true;
}
return mobile_flag;
}
</script>
<div id id="aacc" class="aacc" style="width:95%;">
<div class="parent1">
<div class="child1"><img src="images/9.jpg">5</div>
<div class="child1"><img src="images/1.jpg">1</div>
<div class="child1"><img src="images/2.jpg">2</div>
<div class="child1"><img src="images/3.jpg">3</div>
<div class="child1"><img src="images/5.jpg">6</div>
<div class="child1"><img src="images/4.jpg">3</div>
<div class="child1"><img src="images/6.jpg">5</div>
<div class="child1"><img src="images/7.jpg">6</div>
<div class="child1"><img src="images/8.jpg">0</div>
<div class="child1"><img src="images/0.jpg">8</div>
<div class="child1"><img src="images/1.jpg">9</div>
</div>
</div>
</body>
图片4列效果
图片2列效果