我正在构建这些网站：www.watersandstudio.com/test（是一个测试），我想知道为什么我的效果无法启动。（我有一个particle.js和一个投资组合部分）
只有在调整浏览器窗口大小时才会运行它们。 （我在所有浏览器上测试过）
提前致谢
Particle.js
particlesJS("particles-js", {
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area":1000
}
},
"color": {
"value": ["#aa73ff", "#f8c210", "#83d238", "#33b1f8"]
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#fff"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.6,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 2,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 120,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": false
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
});
投资组合js（这是代码）
$(window).on("load resize", function () {
$('#loader-overlay').fadeOut('slow', function () {
$(this).remove();
});
var $container2 = $('.isotope'),
colWidth = function () {
var w = $container2.width(),
columnNum = 1,
columnWidth = 0;
if ($('#even-grid').length > 0) {
if (w > 1040) {
columnNum = 4;
} else if (w > 850) {
columnNum = 4;
} else if (w > 768) {
columnNum = 2;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#masonry-grid-3').length > 0) {
if (w > 1040) {
columnNum = 3;
} else if (w > 850) {
columnNum = 3;
} else if (w > 768) {
columnNum = 2;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#masonry-grid-4').length > 0) {
if (w > 1040) {
columnNum = 4;
} else if (w > 850) {
columnNum = 4;
} else if (w > 768) {
columnNum = 2;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#even-grid-5').length > 0) {
if (w > 1040) {
columnNum = 5;
} else if (w > 850) {
columnNum = 5;
} else if (w > 768) {
columnNum = 4;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#even-grid-3').length > 0) {
if (w > 1040) {
columnNum = 3;
} else if (w > 850) {
columnNum = 3;
} else if (w > 768) {
columnNum = 2;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
} else if ($('#masonry-grid-5').length > 0) {
if (w > 1040) {
columnNum = 5;
} else if (w > 850) {
columnNum = 5;
} else if (w > 768) {
columnNum = 4;
} else if (w > 480) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
}
columnWidth = Math.floor(w / columnNum);
//Default item width and height
$container2.find('.item-img').each(function () {
var $item = $(this),
width = columnWidth,
height = columnWidth;
$item.css({
width: width,
height: height
});
});
//2x width item width and height
$container2.find('.width2').each(function () {
var $item = $(this),
width = columnWidth * 2,
height = columnWidth;
if (w <= 480) {
width = columnWidth;
}
$item.css({
width: width,
height: height
});
});
//2x height item width and height
$container2.find('.height2').each(function () {
var $item = $(this),
width = columnWidth,
height = columnWidth * 2;
$item.css({
width: width,
height: height
});
});
//2x item width and height
$container2.find('.width2.height2').each(function () {
var $item = $(this),
width = columnWidth * 2,
height = columnWidth * 2;
$item.css({
width: width,
height: height
});
});
return columnWidth;
},
$container2 = $('.isotope').isotope({
resizable: true,
itemSelector: '.item-img',
masonry: {
columnWidth: colWidth(),
gutterWidth: 10
}
});
/*
Portfolio Filter using Isotope
*/
$('.gallery-filter').on('click', 'li', function () {
$('.gallery-filter li').removeClass('active');
$(this).addClass('active');
var filterValue = $(this).attr('data-filter');
$container2.isotope({
filter: filterValue
});
});
});
答案 0 :(得分：0)
没有代码，修复起来并不容易，你可以用黑客修复它
window.onload = function(){ window.dispatchEvent(new Event('resize')); };
但修复代码将是一个更好的解决方案。