Кладка сетки и загрузка изображения в VUE JS - PullRequest
Новая
       27

Кладка сетки и загрузка изображения в VUE JS

0 голосов
/ 09 февраля 2020

Я не очень опытен в VUE js. Я пытаюсь преобразовать этот пример образец кладки превратить его в VUE JS проект. Он основан на более js библиотеках, таких как: Imagesloaded, Velocity. js, wow. js isotope. js. Все здесь сделано с jquery. Работает отлично! 

$(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();
})

/*$grid.imagesLoaded( function() {
     $grid.isotope({
        containerStyle: null,
        masonry:{
            columnWidth: 300,
            gutter: 15
        },
        itemSelector: '.grid-item',
        filter : '*',
        transitionDuration: '0.4s'
    });
});*/

function GenerateItems(){
    var items = '';
    for(var i=0; i < 20; i++){
        items += '<div class="grid-item c'+(i%9)+' wow fadeInUp" ><img src="'+Imgs[i%Imgs.length]+'" /></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());

$(document).on('click','.filter-item',function(){
    $('.filter-item.active').removeClass('active');
    $(this).addClass('active');
    var f = $(this).data('f');
    console.log(f);
    $grid.find('.grid-item').removeClass('wow').removeClass('fadeInUp');
    $grid.isotope({filter: f});

})


$(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();

}) Как мне организовать этот проект для работы в vue. js? Можно ли использовать все зависимости библиотек напрямую от файла html из CDN? Я пытался провести несколько тестов в VUE JS с плохим результатом, vue js код . Я заметил две вещи: 1 - если я использую изображения с URL из Интернета, они не отображаются. 2 - если новые элементы добавляются в сетку, кладка не создает их в нужном месте.

...