14
Tôi đang sử dụng mã sau tôi tìm thấy từ CodePen ... Im khủng khiếp ở JS và tôi đã hy vọng ai đó có thể giúp tôi.Javascript lặp qua các mục và hoán đổi các mục thành HTML
- Làm cách nào để làm cho các mục không lặp lại, tại thời điểm này, chúng cuộn vĩnh viễn bằng 20 đến 'trang' trước khi cuộn vô hạn đá vào, điều tôi muốn là nếu có 50 hình ảnh trong mảng, sau đó hiển thị những hình ảnh đó, 20 đến một trang và sau đó dừng lại.
- Tôi muốn đặt JS trong một tệp riêng biệt và sau đó sử dụng PHP để lặp qua một số kết quả và xuất hình ảnh, có thể bằng cách nào đó di chuyển div đó là hiển thị hình ảnh ra khỏi hàm javascript không? để tôi có thể đặt chúng trong thực tế trong khối trong html?
Đây là mã tôi có trong phần HTML
<div id="SlideMiddle">
<div id="grid">
<div id="grid-content"></div>
</div>
</div>
và đây là javascript
<script>
var Imgs = [
'https://tympanus.net/Development/GridLoadingEffects/images/1.jpg',
'https://tympanus.net/Development/GridLoadingEffects/images/3.jpg',
'https://d13yacurqjgara.cloudfront.net/users/64706/screenshots/1167254/attachments/152315/SUGARSKULL-01.png',
'https://tympanus.net/Development/GridLoadingEffects/images/8.jpg',
'https://tympanus.net/Development/GridLoadingEffects/images/10.png',
'https://tympanus.net/Development/GridLoadingEffects/images/14.png',
'https://tympanus.net/Development/GridLoadingEffects/images/9.jpg',
'https://tympanus.net/Development/GridLoadingEffects/images/13.png',
'https://tympanus.net/Development/GridLoadingEffects/images/12.png',
'https://tympanus.net/Development/GridLoadingEffects/images/4.jpg',
'http://www.thedrum.com/uploads/news/172673/DzrMPF_DeezerPoster_MusicSoundBetterWithYou_03.jpg'
];
$(document).ready(function(){
$grid = $('#grid-content');
$.fn.revealItems = function($items){
var iso = this.data('isotope');
var itemSelector = iso.options.itemSelector;
$items.hide();
$(this).append($items);
$items.imagesLoaded().progress(function(imgLoad, image){
var $item = $(image.img).parents(itemSelector);
$item.show();
iso.appended($item);
});
return this;
}
$grid.isotope({
containerStyle: null,
masonry:{
columnWidth: 300,
gutter: 15
},
itemSelector: '.grid-item',
filter : '*',
transitionDuration: '0.4s'
});
$grid.imagesLoaded().progress(function(){
$grid.isotope();
})
function GenerateItems(){
var items = '';
for(var i=0; i < 20; i++){
items += '<div class="grid-item c'+(i%9)+' wow fadeInUp" ><a href=""><img src="'+Imgs[i%Imgs.length]+'" /></a></div>';
}
return $(items);
}
// SimpleInfiniteScroll
function Infinite(e){
if((e.type == 'scroll') || e.type == 'click'){
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
var bottom = top + $(window).height();
var docBottom = $(document).height();
if(bottom + 50 >= docBottom){
$grid.revealItems(GenerateItems());
}
}
}
$grid.revealItems(GenerateItems());
$(window).resize(function(){
var margin=40;
var padding=15;
var columns=0;
var cWidth=300;
var windowWidth = $(window).width();
var overflow = false;
while(!overflow){
columns++;
var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
if(WidthTheory > windowWidth)
overflow = true;
}
if(columns > 1)
columns--;
var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);
if(GridWidth != $('#grid').width()){
$('#grid').width(GridWidth);
}
});
$(window).scroll(Infinite);
new WOW().init();
})
</script>
https://codepen.io/anon/pen/WXgvjR đây là codepen tôi đã tạo ... Những gì tôi muốn làm là di chuyển việc tạo div từ bên trong JS, để liệt kê chúng theo cách thủ công trong html, bên trong div nội dung lưới, theo cách đó tôi có thể sử dụng một số phân trang với PHP và cũng có thể thêm các thẻ động. Tôi cũng muốn họ hiển thị theo thứ tự thay vì ngẫu nhiên – BigJobbies