javascript - 在500篇文章中实时搜索关键字的最快方法

Question

我有一个包含 500 多篇文章的模态，但只有 3 行及其标题可见。

当您搜索关键字时，说 lorem ipsem，我想显示包含它的所有文章并隐藏其余文章。它发生在 input.onkeyup 上。我已经测试了两种不同的方法:

#1

此代码用于在所有文章的 innerText 中搜索关键字。如果列包含关键字，则显示它，否则隐藏。

const keyword = event.target.value.trim().toLowerCase();
const columns = document.querySelectorAll('.articles');
if (keyword.length > 0) {
  for (let column of columns) {
    if (column.innerText.toLowerCase().indexOf(keyword) === -1) {
      column.style.display = "none";
    } else {
      column.style.display = "flex";
    }
  }
} else {
  for (let column of columns) {
    column.style.display = "flex";
  }
}

#2

使用js内置的filter方法过滤文章，重新生成文章的template，从DOM中移除已存在的文章>，然后追加新的。

const keyword = event.target.value.trim().toLowerCase();
const regex = new RegExp(`${keyword}`, 'gi');
const helpArticles = Utils.getItem("helpArticles")
  .filter(article => article['title'].toLowerCase().indexOf(keyword) !== -1 || article['desc_un_html'].toLowerCase().indexOf(keyword) !== -1)

我没有包括我用来生成模板的代码。如果您想知道，请发表评论，我会这样做

---

第一种方法比第二种方法快。在结果可见之前只有一秒钟的延迟。但是项目经理认为它很慢。是否有更好/更快的方法在 500 篇文章中搜索关键字？

Answer 1

这非常适合前缀树，我构建了一个示例，说明如何使用实现树的库来使用它

prefix-tree

在示例中我使用了大约 300 个带有随机文本的 div

注意上面的代码是库本身，下面的代码是搜索

function Tree(items) {
  this._root = { children: {}, value: null };
  (items || []).forEach(function(item) {
    this.set(item[0], item[1])
  }, this);
}
Tree.prototype._find = function(key) {
  var length = key.length;
  if (!length) {
    return undefined;
  }

  var node = this._root;
  var i;

  for (i = 0; i < length; i++) {
    if (node.children[key[i]]) {
      node = node.children[key[i]];
    } else {
      return undefined;
    }
  }

  return node;
};

Tree.prototype.get = function(prefix) {
  var match = this._find(prefix || '');
  if (!match) { return []; }

  var nodes = [match];
  var res = [];
  var n = 0;
  var node, i, keys;

  while(n < nodes.length) {
    node = nodes[n];
    node.value && res.push(node.value);
    keys = Object.keys(node.children);
    for (i = 0; i < keys.length; i++) {
      nodes.push(node.children[keys[i]]);
    }
    n++;
  }

  return res;
};

Tree.prototype.set = function(key, value) {
  var node = this._root;
  var i;

  for (i = 0; i < key.length; i++) {
    if (node.children[key[i]]) {
      node = node.children[key[i]];
    } else {
      node = node.children[key[i]] = { children: {} };
    }
  }

  node.value = value;
  return this;
};

var _treeToString =function() { return '[object Tree]'; };
Tree.prototype.toString = function() {
  return _treeToString(this._root);
};



///////////////// end of lib/////////////////////////////////






const t = new Tree();
const columns = document.querySelectorAll('.articles');
for (let column of columns) {
  t.set(column.innerText.toLowerCase(),column)	
}

window.search = function(event){

  console.time('search took ');


  columns.forEach(column =>{

     if(column.style.display !== "none"){
      column.style.display = " none";
    } 
  })

   t.get(event.target.value.toLowerCase()).forEach(column =>{
      column.style.display = "block";
  }) 

console.timeEnd('search took ');

}

<input type="text" placeholder='search' onkeyup="search(event)">


<div class="articles">Cras felis ut.</div><div class="articles">Nulla lacus non imperdiet dapibus venenatis pulvinar fringilla nullam, tellus sit mattis metus.</div><div class="articles">Nulla vestibulum porta primis velit at sem, consequat augue.</div><div class="articles">Velit posuere vitae euismod platea, sagittis iaculis feugiat nibh quisque, duis scelerisque hac!</div><div class="articles">Fames hac fringilla.</div><div class="articles">Tincidunt neque ut non nisl lobortis per pharetra suspendisse.</div><div class="articles">Commodo donec platea, a porta vel ante laoreet nullam in curae justo, aliquet imperdiet sapien tortor.</div><div class="articles">Cras vulputate sollicitudin curabitur feugiat potenti.</div><div class="articles">Accumsan maecenas integer tristique tempor ante?</div><div class="articles">Vehicula placerat duis?</div><div class="articles">Curabitur est auctor vel scelerisque turpis, aenean class potenti cras per, mollis blandit euismod!</div><div class="articles">Amet nisi morbi sed est?</div><div class="articles">Suspendisse tortor conubia class id quisque cras per, orci aliquam, non himenaeos venenatis nullam, bibendum consectetur risus libero, nunc nullam primis curabitur porttitor?</div><div class="articles">Conubia malesuada purus!</div><div class="articles">Sollicitudin velit.</div><div class="articles">Praesent dui augue semper iaculis.</div><div class="articles">Faucibus erat orci luctus tempor nibh dolor metus convallis?</div><div class="articles">Per proin at etiam maecenas quisque aliquet dapibus scelerisque, nam litora lobortis auctor integer risus nostra!</div><div class="articles">Varius dapibus vel luctus imperdiet!</div><div class="articles">Donec condimentum felis erat orci fermentum.</div><div class="articles">Dolor egestas ultricies tellus at non, class est aenean ut taciti curabitur ut, erat suspendisse.</div><div class="articles">Hendrerit proin fusce nostra blandit ac class, elementum sapien facilisis nibh donec sed, torquent pellentesque?</div><div class="articles">Rutrum felis volutpat consequat nulla, dictum posuere sagittis ultrices sem gravida laoreet, fusce risus pulvinar tellus.</div><div class="articles">Nunc elit ut amet aliquet litora, quis sapien pretium sociosqu purus laoreet, urna vivamus.</div><div class="articles">Vehicula netus per et ligula neque laoreet eleifend nec.</div><div class="articles">Nisl pharetra justo quisque nullam nostra torquent accumsan molestie potenti vitae!</div><div class="articles">Euismod nostra tempus mollis fringilla, viverra fusce morbi porta!</div><div class="articles">Nulla nec class rhoncus.</div><div class="articles">Enim volutpat mauris purus quisque scelerisque blandit senectus, per molestie!</div><div class="articles">Imperdiet ultrices etiam ultrices nibh eget auctor vivamus pulvinar, accumsan interdum nisl etiam.</div><div class="articles">A rhoncus facilisis tellus aenean consequat?</div><div class="articles">Nec cursus dictum donec, fermentum sed non eget feugiat donec!</div><div class="articles">Ut semper purus placerat torquent, sem morbi praesent?</div><div class="articles">Enim dolor class.</div><div class="articles">Ut viverra praesent himenaeos vehicula tortor!</div><div class="articles">Nec at etiam magna metus inceptos interdum ut.</div><div class="articles">Egestas quisque.</div><div class="articles">Bibendum leo auctor per eros scelerisque, ante dictumst cursus elementum.</div><div class="articles">Primis eleifend semper pretium euismod cubilia eget aliquet mattis est.</div><div class="articles">In bibendum ac phasellus donec fringilla ac ultricies pharetra.</div><div class="articles">Proin consectetur aliquet sem curabitur aliquam, dictumst eros nullam ullamcorper!</div><div class="articles">Eu interdum lacus nunc placerat rhoncus conubia.</div><div class="articles">Leo neque nibh, praesent aliquam ad metus fermentum odio risus arcu.</div><div class="articles">Velit vivamus taciti aliquet suspendisse, consequat congue dui curabitur fringilla egestas eleifend sagittis.</div><div class="articles">Venenatis augue lectus congue lectus!</div><div class="articles">Massa donec porttitor arcu dictum convallis.</div><div class="articles">Lobortis cubilia interdum quis nisi lacinia?</div><div class="articles">Ullamcorper lorem litora placerat pellentesque?</div><div class="articles">Duis at tincidunt blandit venenatis posuere nunc ligula aptent euismod?</div><div class="articles">Aliquam varius per eleifend varius!</div><div class="articles">Nisl consequat rhoncus egestas nec dui, enim molestie elit.</div><div class="articles">Eleifend erat a dictum, facilisis tellus tincidunt risus duis dolor vivamus.</div><div class="articles">Neque sapien praesent et habitasse sapien tincidunt arcu dui at!</div><div class="articles">Cubilia sociosqu at libero a suscipit.</div><div class="articles">Rutrum lectus morbi aenean rhoncus integer quam mattis.</div><div class="articles">Donec dictumst dictum sagittis dictumst molestie non, egestas ipsum.</div><div class="articles">Nullam aptent sit senectus, aliquam aenean ad hac morbi, auctor congue enim suspendisse.</div><div class="articles">Erat mollis et rutrum ultrices varius.</div><div class="articles">Porttitor nisl justo lectus, in feugiat dictumst aenean viverra porta ipsum etiam porttitor nisl ante donec, venenatis etiam?</div><div class="articles">Sociosqu ad lobortis cursus odio, non quisque consequat posuere litora, quam iaculis dapibus mollis?</div><div class="articles">Accumsan fusce venenatis sed luctus eros nam dolor aenean.</div><div class="articles">Et justo aliquam diam vulputate, proin ante consequat hendrerit tortor.</div><div class="articles">Purus vel volutpat.</div><div class="articles">Donec porta ultricies quam himenaeos gravida morbi nisl.</div><div class="articles">Nisi urna aenean ullamcorper litora nostra nunc hendrerit nulla, faucibus porttitor duis enim accumsan nam feugiat dictum.</div><div class="articles">Phasellus tortor tellus nisi, integer platea vehicula etiam.</div><div class="articles">Eleifend consectetur rutrum, sem nisi tellus, purus nostra sollicitudin commodo.</div><div class="articles">Dolor aliquam luctus, quisque accumsan auctor hendrerit pharetra, suspendisse enim, laoreet suscipit curae quis, blandit vivamus proin.</div><div class="articles">Pellentesque varius dui potenti?</div><div class="articles">Scelerisque in varius etiam nec tristique neque ornare magna non diam eget litora.</div><div class="articles">Feugiat aenean sit tortor adipiscing varius rutrum vulputate, senectus sodales elementum!</div><div class="articles">Tempor condimentum potenti hac laoreet tristique, imperdiet sem euismod tellus?</div><div class="articles">Augue facilisis sed nam placerat euismod vestibulum pharetra luctus, sodales vitae?</div><div class="articles">Urna sit curabitur taciti potenti nisl, aliquam elementum iaculis.</div><div class="articles">Orci commodo nibh fames ante luctus sit ut interdum mi nec fames convallis?</div><div class="articles">Enim orci quisque egestas quam enim massa?</div><div class="articles">Aliquam netus curabitur et quis!</div><div class="articles">Venenatis sit rhoncus tempor erat diam, platea consectetur senectus.</div><div class="articles">Convallis est ligula augue curabitur est pretium.</div><div class="articles">Consectetur posuere ullamcorper aenean.</div><div class="articles">Justo posuere auctor accumsan nisi duis erat diam, nisl consectetur quis congue, dapibus lobortis ornare?</div><div class="articles">Lacus malesuada imperdiet suscipit tincidunt.</div><div class="articles">Nisl tellus in cras purus convallis nullam ipsum varius!</div><div class="articles">Nisl sodales pulvinar inceptos ipsum lorem senectus congue diam quisque, metus neque curabitur enim, aliquet et nisi sociosqu nibh conubia litora.</div><div class="articles">Enim consequat habitant iaculis felis metus erat volutpat fames scelerisque!</div><div class="articles">Nibh morbi quisque blandit interdum?</div><div class="articles">Dolor felis eleifend ultrices maecenas, tristique dictum erat litora.</div><div class="articles">Odio torquent ornare pharetra!</div><div class="articles">Ad aliquam lorem est.</div><div class="articles">Nisl gravida eleifend neque morbi class nullam.</div><div class="articles">In torquent fusce felis?</div><div class="articles">Erat auctor gravida aliquet nostra fringilla, interdum netus leo vel faucibus.</div><div class="articles">Tristique sed class scelerisque aenean, integer fusce?</div><div class="articles">Habitant dui etiam netus aliquam augue lobortis pulvinar ligula, ad varius.</div><div class="articles">Tempor praesent sodales convallis torquent, purus vitae nisi sollicitudin taciti laoreet, tristique ornare primis aenean interdum.</div><div class="articles">Suscipit magna nunc potenti, auctor mollis.</div><div class="articles">Fames malesuada orci!</div><div class="articles">Mattis duis facilisis, nunc elementum sagittis aliquam proin ultrices, erat neque odio enim, viverra libero eleifend!</div><div class="articles">Vel vulputate sem ut duis, lorem quisque mauris bibendum.</div><div class="articles">Quisque tristique morbi, class nibh egestas.</div><div class="articles">Tortor sollicitudin donec semper elit.</div><div class="articles">Dui justo iaculis odio etiam cras!</div><div class="articles">Molestie duis ornare.</div><div class="articles">Varius hendrerit!</div><div class="articles">Ut felis urna risus bibendum et eu, ultricies taciti?</div><div class="articles">Nunc commodo volutpat praesent varius!</div><div class="articles">Interdum eget lacus donec!</div><div class="articles">Dui consectetur pharetra nisl nec orci, massa nulla dictumst nostra ornare ut vestibulum scelerisque blandit.</div><div class="articles">Fermentum faucibus vulputate eleifend quisque leo auctor ut non, eleifend sociosqu donec dui imperdiet, habitant aliquam integer, sodales ut varius lobortis sollicitudin himenaeos.</div><div class="articles">Eget duis aliquet massa volutpat vestibulum aptent dapibus tempus laoreet facilisis mi aenean nibh.</div><div class="articles">Lacus fusce donec rhoncus suspendisse habitant felis sapien, rhoncus quis conubia?</div><div class="articles">Sociosqu ultricies aliquam suscipit, proin molestie eleifend ut netus, fringilla quisque?</div><div class="articles">Sapien urna scelerisque libero curae.</div><div class="articles">Erat integer condimentum ultricies, mauris tristique taciti urna aliquet rutrum, ac mi erat morbi erat tincidunt.</div><div class="articles">Accumsan dapibus pulvinar, donec lorem torquent mattis id nostra sed?</div><div class="articles">Lacus pulvinar donec dui.</div><div class="articles">Pellentesque torquent sem, nisi duis, hendrerit scelerisque adipiscing consectetur, risus ac metus donec interdum turpis.</div><div class="articles">Ultricies in sociosqu phasellus nulla quisque aliquam fermentum condimentum etiam sed porta.</div><div class="articles">Vulputate aenean laoreet per ut lectus tortor donec platea turpis!</div><div class="articles">Massa neque massa.</div><div class="articles">Mi interdum habitasse nulla habitant.</div><div class="articles">Venenatis nec?</div><div class="articles">Fermentum duis!</div><div class="articles">Blandit laoreet fermentum eget at donec placerat, primis dolor quisque risus, habitant class justo.</div><div class="articles">Proin commodo nunc ac ut.</div><div class="articles">Mollis vulputate vitae velit primis cras.</div><div class="articles">Hendrerit erat faucibus nostra nec?</div><div class="articles">Dictumst laoreet accumsan.</div><div class="articles">Vestibulum aenean egestas auctor tempus torquent.</div><div class="articles">Habitasse amet conubia dui fusce ultrices, magna dolor?</div><div class="articles">Dolor class nam commodo tincidunt aliquam elit.</div><div class="articles">Etiam quis pulvinar eget augue nisl gravida pellentesque tortor tempor vivamus platea pellentesque nisl hac!</div><div class="articles">Interdum donec odio eros?</div><div class="articles">Cursus leo quam, luctus semper vitae curabitur a, euismod elementum eros conubia?</div><div class="articles">Curabitur congue commodo!</div><div class="articles">Ligula ultricies convallis eros!</div><div class="articles">Dolor elit conubia tincidunt?</div><div class="articles">Quam placerat fermentum interdum dui netus risus malesuada!</div><div class="articles">Tellus pretium habitasse ad, nostra fames nullam, sed blandit.</div><div class="articles">Varius et suscipit quam, id semper phasellus neque hendrerit cubilia accumsan facilisis potenti.</div><div class="articles">Vitae ornare egestas nec eget platea id neque!</div><div class="articles">Vel habitasse proin primis inceptos diam, curabitur massa rutrum.</div><div class="articles">At non.</div><div class="articles">Nec litora odio ut donec condimentum himenaeos in varius torquent quisque, euismod morbi.</div><div class="articles">Condimentum eleifend.</div><div class="articles">Quis platea pulvinar condimentum habitasse ultrices.</div><div class="articles">Congue interdum tristique aptent suscipit justo, interdum gravida elementum donec habitasse?</div><div class="articles">Tellus ad varius venenatis erat tristique.</div><div class="articles">Arcu pulvinar commodo habitant risus venenatis turpis commodo senectus sollicitudin!</div><div class="articles">Curae hac odio.</div><div class="articles">Luctus ligula.</div><div class="articles">Congue mauris mattis ac erat vulputate adipiscing etiam nullam.</div><div class="articles">Cubilia curabitur suscipit in tempor suspendisse.</div><div class="articles">Augue quisque tellus quisque sed!</div><div class="articles">Enim vehicula sociosqu purus donec, vestibulum ullamcorper.</div><div class="articles">Venenatis lacus!</div><div class="articles">Ante imperdiet quisque lacinia.</div><div class="articles">Litora cras.</div><div class="articles">Augue suscipit nostra hac.</div><div class="articles">Phasellus commodo rhoncus vehicula erat cras.</div><div class="articles">Class sit?</div><div class="articles">Dui fames felis libero purus enim maecenas mauris volutpat, nisl habitasse mauris viverra eget ut ad feugiat lobortis suspendisse sem!</div><div class="articles">Duis nec eros, in dolor faucibus lorem nostra.</div><div class="articles">Lacinia dictumst egestas torquent himenaeos purus nisl per platea elit id placerat etiam, non aenean.</div><div class="articles">Rhoncus consectetur libero mollis eros volutpat dui risus, id aenean enim.</div><div class="articles">Tincidunt euismod lacus nullam taciti etiam a venenatis aliquam laoreet magna mollis condimentum, phasellus sagittis!</div><div class="articles">Per augue arcu senectus nulla purus felis!</div><div class="articles">Sapien curabitur accumsan?</div><div class="articles">Pharetra tincidunt taciti hendrerit cursus aliquam?</div><div class="articles">Nullam faucibus congue eros vivamus.</div><div class="articles">Vitae accumsan quam imperdiet vehicula, venenatis augue fames tincidunt faucibus ultricies.</div><div class="articles">Ut morbi inceptos interdum nam.</div><div class="articles">Velit et ultrices cursus bibendum?</div><div class="articles">Habitasse faucibus dui quisque tincidunt.</div><div class="articles">Nulla aenean vehicula rhoncus non, nisi magna quisque.</div><div class="articles">Tempus condimentum enim porta dapibus velit facilisis?</div><div class="articles">Vel tempor torquent!</div><div class="articles">Venenatis luctus quisque dapibus morbi, etiam malesuada donec risus etiam.</div><div class="articles">Sollicitudin sem odio, suspendisse sit consequat ipsum, eleifend conubia enim mollis litora, eu nisi.</div><div class="articles">Ornare sapien fames eros.</div><div class="articles">Posuere feugiat metus tincidunt nibh!</div><div class="articles">Eu fringilla enim pellentesque hendrerit vestibulum, ante vitae, ultrices mattis turpis aliquet blandit malesuada.</div><div class="articles">Ut per orci euismod donec.</div><div class="articles">Himenaeos in erat litora ullamcorper?</div><div class="articles">Tristique vehicula mauris est pharetra per convallis.</div><div class="articles">Maecenas vehicula torquent lectus imperdiet.</div><div class="articles">Porta lectus nostra inceptos aenean.</div><div class="articles">Potenti ad netus aliquam et litora maecenas, cras hac semper?</div><div class="articles">Consequat aliquet faucibus tempus, non ac!</div><div class="articles">Fermentum sit lacus justo fames sociosqu cubilia bibendum pulvinar, tellus porttitor justo sociosqu?</div><div class="articles">Posuere nunc magna aliquam odio curae tristique viverra aliquam?</div><div class="articles">A dolor fames scelerisque phasellus mi urna, mattis sollicitudin gravida tempus dictumst.</div><div class="articles">Habitant nibh rhoncus sem diam vulputate?</div><div class="articles">Faucibus malesuada fusce quisque rhoncus fusce tempus mauris dictum?</div><div class="articles">Fusce orci aenean nibh nulla convallis dictum orci cursus, aenean habitasse.</div><div class="articles">Lacinia fames donec habitant luctus fermentum sociosqu mollis maecenas!</div><div class="articles">Facilisis faucibus curabitur magna ad morbi magna!</div><div class="articles">Est quis porta aliquam.</div><div class="articles">Taciti velit dui mollis consectetur congue curabitur tincidunt consectetur sapien.</div><div class="articles">Ac sapien rutrum.</div><div class="articles">Justo cursus lobortis.</div><div class="articles">Netus velit vestibulum bibendum fames habitant libero.</div><div class="articles">Curae laoreet commodo.</div><div class="articles">Placerat maecenas malesuada pretium ut lacus, semper praesent vehicula massa et dapibus pretium nullam, massa arcu!</div><div class="articles">Ornare senectus cras vel netus libero vivamus faucibus?</div><div class="articles">Tristique ad id per sollicitudin fermentum.</div><div class="articles">Fusce sollicitudin fermentum.</div><div class="articles">Non ante sit libero diam lorem!</div><div class="articles">Suspendisse etiam eleifend laoreet dapibus, suspendisse et viverra quisque class nisl pellentesque!</div><div class="articles">Odio inceptos!</div><div class="articles">Urna orci donec dapibus nisi?</div><div class="articles">Neque quisque consequat.</div><div class="articles">Etiam molestie consectetur, turpis vitae taciti duis vitae morbi metus euismod.</div><div class="articles">Nunc rhoncus est aenean, ac commodo placerat vehicula.</div><div class="articles">Dapibus ut libero, sagittis bibendum laoreet luctus, eleifend viverra tortor.</div><div class="articles">Feugiat libero est dictumst fringilla!</div><div class="articles">Lacinia consequat est tincidunt vehicula.</div><div class="articles">Luctus fusce dui, sociosqu potenti rhoncus?</div><div class="articles">Porta nam pulvinar per ullamcorper ante.</div><div class="articles">Facilisis phasellus varius ut.</div><div class="articles">Phasellus etiam mollis.</div><div class="articles">Amet vulputate enim erat in, litora nibh?</div><div class="articles">Mi fames tristique phasellus, vestibulum morbi mi imperdiet.</div><div class="articles">Potenti etiam congue vel.</div><div class="articles">Cubilia sed fames arcu massa, primis consectetur nec pretium vivamus iaculis nullam donec, sit mauris eleifend quisque?</div><div class="articles">Conubia lacinia diam hac, pellentesque mi class euismod, volutpat integer est dictumst pellentesque cursus erat ipsum.</div><div class="articles">Et auctor semper consectetur litora.</div><div class="articles">Commodo at malesuada vel, morbi dictumst sit conubia taciti, venenatis justo diam venenatis viverra rhoncus cubilia lectus.</div><div class="articles">Massa aliquet congue metus aliquet nostra habitant tempus varius?</div><div class="articles">Tincidunt sollicitudin non quisque nisi a, litora class eros ut?</div><div class="articles">Mauris viverra rutrum in dolor euismod dui?</div><div class="articles">Vestibulum gravida consequat sapien aliquet himenaeos blandit viverra praesent, elementum dapibus vestibulum.</div><div class="articles">Ut tempus etiam ornare, nisi molestie dolor, sociosqu libero velit blandit.</div><div class="articles">Tellus porttitor lobortis fusce ante class malesuada curabitur nec tincidunt etiam ad aptent!</div><div class="articles">Semper pellentesque et?</div><div class="articles">Ultricies eget fusce neque senectus velit vitae, cursus aliquam habitant aenean sed.</div><div class="articles">Habitant nec fringilla, urna integer senectus mauris.</div><div class="articles">Fringilla sociosqu magna tellus id vulputate nostra, semper congue in sem faucibus?</div><div class="articles">Fames dictum consequat risus, ipsum at accumsan?</div><div class="articles">Ut metus dolor venenatis egestas curabitur rhoncus.</div><div class="articles">Blandit id pulvinar quisque a id dictumst!</div><div class="articles">Viverra nullam etiam posuere velit ipsum, mauris cras duis venenatis!</div><div class="articles">Vitae ligula donec euismod cursus suscipit molestie rutrum lectus sem curabitur sem!</div><div class="articles">Sem curabitur cursus donec.</div><div class="articles">Sit aenean purus, non in iaculis ac fusce, interdum blandit dolor.</div><div class="articles">Rhoncus id suspendisse sodales velit diam aliquam volutpat consequat curabitur!</div><div class="articles">Ante cubilia magna aliquam dolor, vitae ultrices praesent ornare est suspendisse?</div><div class="articles">Fusce vivamus sollicitudin himenaeos, porttitor torquent augue senectus.</div><div class="articles">Sem aliquam fusce bibendum aliquam quis?</div><div class="articles">Porta adipiscing quisque euismod elementum fusce, euismod convallis sociosqu?</div><div class="articles">Volutpat lacinia platea amet ipsum magna taciti porttitor conubia ultrices ligula lacus, pharetra netus tellus.</div><div class="articles">Lobortis ac convallis scelerisque ad mollis!</div><div class="articles">Class molestie a hac lobortis per tortor, aptent sem netus torquent accumsan erat ipsum euismod, quisque nostra pellentesque?</div><div class="articles">Ante aliquam augue diam mauris dictum torquent?</div><div class="articles">Diam senectus vel porttitor libero tortor!</div><div class="articles">Dictumst aliquam mollis, nulla amet semper sagittis donec laoreet aliquet, pellentesque massa malesuada, integer elementum cras, faucibus volutpat.</div><div class="articles">Orci id feugiat!</div><div class="articles">Scelerisque sapien duis ultricies porta justo placerat aptent fringilla sem torquent, quis ac imperdiet!</div><div class="articles">Vulputate vestibulum tempor.</div><div class="articles">Sagittis tristique imperdiet platea scelerisque volutpat elementum.</div><div class="articles">Tincidunt habitant sem curae sem, lobortis nibh auctor neque!</div><div class="articles">Taciti quisque ad scelerisque, eget nibh bibendum vitae non vehicula diam rhoncus, elementum et conubia magna diam, vel tellus.</div><div class="articles">Aptent nostra augue commodo aliquam lacinia, taciti nec nisi!</div><div class="articles">Semper nisi aliquet, auctor volutpat tellus, etiam scelerisque sem accumsan!</div><div class="articles">Gravida velit risus tortor et faucibus hac vivamus posuere.</div><div class="articles">Tempor tortor fames, consequat augue, urna consequat consectetur, ante congue consectetur conubia dapibus.</div><div class="articles">Risus viverra accumsan nullam nunc ullamcorper dui platea felis id augue!</div><div class="articles">Ante mi vitae!</div><div class="articles">Facilisis malesuada tincidunt aptent phasellus dictumst nostra, class taciti sed fringilla curabitur, feugiat libero fermentum quis condimentum curae, a urna eleifend vulputate.</div><div class="articles">Rutrum dolor vivamus viverra, facilisis donec curabitur mauris litora mauris vehicula turpis!</div><div class="articles">Vivamus condimentum torquent aenean vestibulum interdum auctor.</div><div class="articles">Morbi aliquet gravida consectetur, molestie ut augue malesuada adipiscing vulputate leo nam ligula himenaeos sollicitudin?</div><div class="articles">Dolor tellus integer, cubilia viverra!</div><div class="articles">Aenean pretium quis luctus dapibus proin iaculis.</div>